unit-testing - Jest enzyme 浅测试没有渲染React组件的所有元素

Question

我正在编写如下 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 来完成。

Answer 1

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

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

您的示例中唯一奇怪的事情是，即使是第一级子级也不会渲染。所以也许你也可以发布组件代码。