[英]Enzyme cannot find child component in shallow test
這不是用酶進行反應/回流測試但沒有存儲的正確方法,即“啞”
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
})
})
當我記錄wrapper.html()
我可以看到<img class='spinner' />
被渲染,但是酶無法找到它作為一個組件。 對我來說, 文檔表明這正是我應該做的。 我想我可以檢查一個具有該類的子項,但這似乎比檢查組件本身更麻煩,例如Spinner組件中的類更改。
你應該使用mount()。
來自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);
});
測試可以很好地處理shallow
,但是斷言有一個TypeError,因為它不存在 - 看起來你正在使用Jest,但是酶docs使用chai
BDD庫顯示斷言。
改為使用Jest等價物:
expect(wrapper.find(LoadingSpinner)).toHaveLength(1)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.