javascript 酶在浅层测试中找不到子组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45989385/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Enzyme cannot find child component in shallow test
提问by 1252748
Is this not the correct way to render a react/reflux test with enzyme but without the store, ie, "dumb"
这不是用酶进行反应/回流测试但没有存储的正确方法吗，即“哑巴”
import React from 'react'
import { shallow, render } from 'enzyme'
import { Controls } from '../Controls' // named export
import LoadingSpinner from '../LoadingSpinner'
let wrapper
let loadingFlags = {
controls: true
}
describe('<Controls />', () => {
it('should render only the loading spinner', () => {
wrapper = shallow(<Controls loadingFlags={loadingFlags} />) // this ensures the spinner will show until data is ready
expect(wrapper.length).toEqual(1) // test passes
expect(wrapper.find(LoadingSpinner)).to.have.length(1)
// ^ TypeError: Cannot read property 'have' of undefined
})
})
When I log wrapper.html()I can see the <img class='spinner' />is rendered, but enzyme cannot find it as a component. To me, the docsindicate this is exactly what I should be doing. I suppose I could check for a child with that class, but that seems messier than checking for the component itself, eg the class changes within the Spinner component.
当我登录时，wrapper.html()我可以看到<img class='spinner' />已呈现，但酶找不到它作为组件。对我来说，文档表明这正是我应该做的。我想我可以用那个类检查一个孩子，但这似乎比检查组件本身更麻烦，例如 Spinner 组件内的类更改。
How can I test for the existence of this child component?
如何测试此子组件是否存在？
回答by panghea
You should use a mount().
您应该使用 mount()。
from https://github.com/airbnb/enzyme/blob/master/docs/guides/jsdom.md
来自https://github.com/airbnb/enzyme/blob/master/docs/guides/jsdom.md
import test from 'ava';
import React from 'react';
import { mount, shallow, render } from 'enzyme'
import LoadingSpinner, {Controls} from './LoadingSpinner';
// jsdom init start
const { JSDOM } = require('jsdom');
const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
const { window } = jsdom;
function copyProps(src, target) {
const props = Object.getOwnPropertyNames(src)
.filter(prop => typeof target[prop] === 'undefined')
.map(prop => Object.getOwnPropertyDescriptor(src, prop));
Object.defineProperties(target, props);
}
global.window = window;
global.document = window.document;
global.navigator = {
userAgent: 'node.js',
};
copyProps(window, global);
// jsdom init end
test('<Controls />' , t => {
let wrapper = shallow(<Controls />);
let mntWrapper = mount(<Controls />);
t.true(wrapper.length == 1);
t.true(wrapper.find(LoadingSpinner).length === 1);
t.true(mntWrapper.find("img").length === 1);
t.true(mntWrapper.render().find('img').length === 1);
// if you need to test attributes check below.
t.true(mntWrapper.render().find('img')[0].attribs.src.indexOf('foo') >= 0);
});
回答by alechill
The test will work fine with shallow, but the assertion has a TypeError because it doesn't exist - it looks like you are using Jest, but the enzyme docs show assertions using chaiBDD library.
测试可以很好地使用shallow，但是断言有一个 TypeError 因为它不存在 - 看起来您正在使用 Jest，但酶文档显示使用chaiBDD 库的断言。
Use the Jest equivalent instead:
改用 Jest 等效项：
expect(wrapper.find(LoadingSpinner)).toHaveLength(1)
