효소 객체는

Question

을 .length .TO 유용한 방법 내가

import test from 'ava'; 
import React from 'react'; 
import { shallow } from 'enzyme'; 

import A from '../../../src/components/A/index'; 
import B from '../../../src/components/B/index'; 
console.log('loaded component test'); 

test('shallow', t => { 
    const wrapper = shallow(<A />); 
    t.is(wrapper.find(B).length, 38); 
}); 

구성 요소 A가 여러 구성 요소 기지국의 목록입니다 다음과 같은 검사를이 없습니다. 나는 무엇을 잘못 할 수 있 었는가? 저는 효소와 AVA를 사용하고 있습니다.

Warning: A: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://facebook/react-special-props) 
Warning: A: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://facebook/react-special-props) 
t.is(wrapper.find(B).length, 38) 
              |   
              0   

1 test failed [16:55:47] 
1 uncaught exception 


1. components › A › index › shallow 
AssertionError: 0 === 38 
Test.fn (index.js:11:5) 

Answer 1

이 중첩 구성 요소를 테스트하려면 전체 DOM이 필요하다는 것이 문제였습니다. 나는

/** setup.js 
* provides a document for enzyme mount tests 
* simply require this file to make the environment available 
*/ 
import test from 'ava'; 
var jsdom = require('jsdom').jsdom; 

var exposedProperties = ['window', 'navigator', 'document']; 

global.document = jsdom(''); 
global.window = document.defaultView; 
Object.keys(document.defaultView).forEach((property) => { 
    if (typeof global[property] === 'undefined') { 
    exposedProperties.push(property); 
    global[property] = document.defaultView[property]; 
    } 
}); 

global.navigator = { 
    userAgent: 'node.js' 
}; 

test(t => { 
    t.pass('DOM setup'); // silences ava warning 
}); 

을 추가 한 후 나는 find()에 B를 통과 할 때 나는 jsx 구문을 사용하지 않은 mount

import test from 'ava'; 
import React from 'react'; 
import { mount, shallow } from 'enzyme'; 
import setup from '../../setup'; 

import A from '../../../src/components/A/index'; 
import B from '../../../src/components/B/index'; 

test('should display no B if A given no props', t => { 
    const wrapper = mount(<A />); 
    t.is(wrapper.find(B).length, 0); 
}); 

test('should display two Bs if A given two B via props', t => { 
    const testBs = [ 
    { id: 1}, 
    { id: 2}, 
    ]; 

    const wrapper = mount(<A Bees={testBs} />); 
    t.is(wrapper.find(B).length, 2); 
}); 

주를 이용했다. 또한 ava, babel-core 버전을 업그레이드하고 es2017 사전 설정을 추가하여 비동기/대기 지원을 얻는 데 도움이되었습니다.