reactjs - enzyme 测试嵌套组件的方法

Question

我正在尝试使用 Enzyme 来测试组件的方法。我知道执行此操作的典型方法是使用 Enzyme 的 instance() 方法。

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

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

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

Answer 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();