Question

我正在写一个开玩笑酶测试如下：

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但想通过酶来做。

Answer 1

问题是shallow只渲染一个级别，因此组件中使用的每个子组件都将被渲染，但不会渲染它们的子组件。有两种方法可以使酶呈现孩子的内容。首先是mount，它将强制所有组件呈现其子项，直到它们到达DOM元素。这样做的问题是它可能导致非常大且难以阅读的快照。

另一种解决方案是使用dive强制子组件呈现其内容。如果您使用来自redux的connect等更高阶的组件，这将非常有用。因为在这种情况下，您呈现的组件将只是包装的组件，而shallow将不会呈现您期望的内容。使用dive，您可以强制包装的组件渲染其子项，这是您真正希望在快照中看到的。

你的例子唯一奇怪的是即使是第一级孩子也不会被渲染。所以也许你也可以发布组件代码。

Answer 2

如果有人仍在寻找原因并修复。

这不是修复子组件无法渲染的问题。对于该问题，请参阅@AndreasKöberle已经发布的答案。

免责声明： 由于实际的组件代码未共享，我不能完全确定问题的原因是否与下面解释的相同。

我遇到类似问题的shallow没有呈现受测试的组件而是返回<MyComponent ... />，结果原因是injectSheet()装饰器。

import injectSheet from 'react-jss'
...
class MyComponent extends Component {
   ...
}
export default injectSheet(combinedStyle)(MyComponent)

也许，shallow不会在样式化组件上调用渲染。

作为一种解决方法，我将无样式版本与默认样式版本

一起导出

export default injectSheet(Styles)(MyComponent)
export { MyComponent as UnstyledMyComponent }

Answer 3

那是因为您正在使用酶shallow渲染。您希望使用完整DOM渲染（mount）。

https://github.com/airbnb/enzyme/blob/master/docs/api/mount.md

it('snapshot test', () => {
    const setRouteLeaveHook =jest.fn();
    let wrapper = mount(
        <ManageDrugTermPage params={{id : 25, router: setRouteLeaveHook}}/>
    );
    expect(toJson(wrapper)).toMatchSnapshot();
});

Jest酶浅测试不会渲染React组件的所有元素

3 个答案: