Question

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

问题是，这只适用于root组件，我的组件需要在两个Context提供程序中进行包装（即react-router和apollo client）。

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

在这种情况下，如何测试methodA的{{1}}？

Answer 1

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

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

使用：

获取AuthFormContainer的组件树

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

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

authFormControllerTree.instance().methodA();

Answer 2

尝试find(ApolloProvider).dive() - 和console.log来查看里面的树。

Answer 3

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

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

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

要注入上下文，您可以使用Enzyme的浅方法。

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

Answer 4

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

酶测试嵌套组件的方法

4 个答案: