我有以下测试
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是几个组件B的列表。我能做错什么?我使用Enzyme和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)
答案 0 :(得分:0)
问题是我需要一个完整的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
});
然后我使用了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);
});
注意我将B
传递给find()
时没有使用jsx语法。它还有助于升级ava
,babel-core
版本并添加es2017
预设以获得异步/等待支持。