Question

我在组件内部有链接。我已经在app.js中指定了路由路径。

当我尝试使用Swallow和Mount在组件内部找到 Link 控件时，会引发错误。

任何人都可以共享该示例以在组件内部找到链接按钮代码

 it('includes link to Next Exam', () => {
        const home = shallow(
          <StaticRouter>
            <ComponentForm/>
          </StaticRouter>,
        );
        expect(home.find(Link)).toHaveLength(1);
      });

Answer 1

Enzyme shallow专门用于无法测试要传递的组件的子代。由于StaticRouter是父组件，因此ComponentForm永远不会得到正确的渲染，因此Link永远不会出现在视图中。因此，使用shallow可以测试StaticRouter是否正确渲染了ComponentForm，但是您无法查看ComponentForm的内部。

您有两个选择：

首先，您可以将ComponentForm传递给shallow方法。您在评论中提到这导致事情中断。这可能是因为ComponentForm期望StaticRouter提供道具。您可以手动传递这些信息：

shallow(<ComponentForm routerProp1={'foo'} routerProp2={'bar'} />);

您的另一选择是使用Enzyme render进行深度渲染。只需将shallow替换为render就可以了。请注意，出于多种原因不建议这样做。首先，如shallow所述，通过不执行shallow渲染，您可以允许自己测试所传入组件不了解的内容。例如，StaticRouter不了解ComponentForm的{{1}}，因此对Link的{{1}}的测试应独立于{{1} }。其次，ComponentForm比Link慢得多，因此，如果您有大量的测试和大量的组件，则会发现速度明显下降。

单元测试-使用Jest和酶在React中链接

1 个答案: