我正在编写如下 Jest enzyme 测试:
import React from 'react';
import ManageDrugTermPage from '../js/manageDrugTermPage.jsx';
import toJson from 'enzyme-to-json';
describe('manage drug term page test suite', () => {
it('snapshot test', () => {
const setRouteLeaveHook =jest.fn();
let wrapper = shallow(
<ManageDrugTermPage params={{id : 25, router: setRouteLeaveHook}}/>
);
expect(toJson(wrapper)).toMatchSnapshot();
})
})
我想在快照中查看 ManageDrugTermPage 的详细信息,但快照仅显示:
exports[`manage drug term page test suites snapshot test 1`] = `
<ManageDrugTermPage
params={
Object {
"id": 25,
"router": [Function],
}
}
/>
`;
如何在快照中呈现 ManageDrugTermPage?我不想使用 renderer.create 但想通过 enzyme 来完成。
最佳答案
问题是 shallow
仅渲染一层深度,因此组件中使用的每个子组件都会被渲染,但不会渲染它们的子组件。有两种方法可以使 enzyme 呈现 child 的内容。
首先是mount
这将强制所有组件渲染其子组件,直到它们到达 DOM 元素。这样做的问题是它可能会导致非常大且难以读取的快照。
另一个解决方案是使用 dive
强制子组件呈现其内容。如果您使用 redux 中的 connect
等高阶组件,这尤其有用。因为在这种情况下,您渲染的组件将只是包装的组件,并且 shallow
不会渲染您期望的内容。使用dive
,您可以强制包装的组件渲染其子组件,这就是您真正希望在快照中看到的内容。
您的示例中唯一奇怪的事情是,即使是第一级子级也不会渲染。所以也许你也可以发布组件代码。
关于unit-testing - Jest enzyme 浅测试没有渲染React组件的所有元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44034904/