开玩笑的酶浅测试不能完全呈现React组件的所有元素

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强制子组件来呈现其内容。如果您要使用connectredux 等高阶组件，这将特别有用。因为在这种情况下，您呈现的组件只是包装的组件，shallow不会呈现您期望的内容。有了它，dive您就可以强制包装的组件呈现其子级，这就是您真正希望在快照中看到的内容。

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