酶测试嵌套组件的方法答案

【问题标题】：Enzyme test nested component's method酶测试嵌套组件的方法
【发布时间】：2018-06-08 17:07:07
【问题描述】：

我正在尝试使用 Enzyme 来测试组件的方法。我知道这样做的典型方法是使用 Enzyme 的 instance() 方法。

问题是，这只适用于root 组件，我的组件需要包装在两个上下文提供程序中才能呈现（即，react-router 和 apollo 客户端）。

  const wrapper = mount(
    <ApolloProvider client={client}>
      <MemoryRouter initialEntries={["/login"]}>
        <AuthFormContainer />
      </MemoryRouter>
    </ApolloProvider>
  );

在这种情况下，我如何测试methodA 的AuthFormContainer？

【问题讨论】：

你应该为 AuthFormContainer 编写一个单独的测试用例
@ShubhamKhatri 你能详细说明如何做到这一点吗？
@ShubhamKhatri 我认为如果这个组件是由 apollo 团队创建的，我们确实需要测试 ApolloProvider，因为它已经过测试。 ThéoChampion 如果是您自定义组件，请单独测试
@ShubhamKhatri 是的，但是我的组件需要用apolloProvider 包装才能呈现（authFormContainer 是消费者）
@ThéoChampion，我的意思是，如果你想在 AuthFormContainer 中测试函数，你需要为该组件编写测试用例，而不是为呈现 ApolloProvider 的组件编写测试用例

标签： reactjs enzyme

【解决方案1】：

对于单元测试，您不必担心其他组件。但如果必须，您可以使用浅渲染。这是我所做的：

const wrapper = shallow(
    <ApolloProvider client={client}>
      <MemoryRouter initialEntries={["/login"]}>
        <AuthFormContainer />
      </MemoryRouter>
    </ApolloProvider>
);

使用以下方法获取AuthFormContainer 的组件树：

const authFormControllerTree = wrapper.find(MemoryRouter).shallow().find(AuthFormContainer).shallow()

现在要测试AuthFormContainer 中的methodA，您可以这样做：

authFormControllerTree.instance().methodA();

【讨论】：

【解决方案2】：

尝试find(ApolloProvider).dive() - 并通过控制台记录它以查看里面的树。

【讨论】：

如果我这样做，我会收到TypeError: wrapper.find(...).dive is not a function，知道发生了什么吗？
你是谁？
你能找到wrapper.find(ApolloProvider)吗？
是的，这回给我ReactWrapper { length: 1 }
TypeError: wrapper.find(...).dive is not a function 如果这是您遇到的错误，那么可能是因为您使用的是mount 而不是shallow。

【解决方案3】：

对于 React 组件，您总是编写 单元测试。根据这个答案：https://stackoverflow.com/a/652382/2873331:

单元测试只是验证各个代码单元（主要是函数）是否按预期工作......

所以在这里你应该尝试测试AuthFormContainer 的功能，而不是 react-router 和 apollo 客户端 是否正确注入上下文。你的测试用例应该测试：给定context 到AuthFormContainer，它的实例方法是否按预期工作。

要注入 context 你可以使用 Enzyme 的 shallow 方法。

it('should work as expected', () => {
    const wrapper = shallow(< AuthFormContainer />, {
        context: { ... }, // pass expected context here

    });
    wrapper.instance().method(); //extract the required method by using instance
    ...
  });

参考：http://airbnb.io/enzyme/docs/api/shallow.html

附带说明，不要使用mount，除非您真的想在 DOM 级别进行测试。 mount 使您的测试变得非常缓慢。总是喜欢shallow。

参考：http://airbnb.io/enzyme/docs/api/mount.html

【讨论】：

【解决方案4】：

始终以不同于连接组件的方式测试包装器组件。导出包装器组件并导入到测试文件并按照您的方式进行测试，但很浅（我更喜欢）

【讨论】：