我正在尝试使用 Enzyme 来测试组件的方法。我知道这样做的典型方法是使用酶的instance()方法。
问题是，这仅适用于root组件，我的组件需要在两个 Context 提供程序中进行包装才能呈现（即 react-router 和 apollo 客户端）。
const wrapper = mount(
<ApolloProvider client={client}>
<MemoryRouter initialEntries={["/login"]}>
<AuthFormContainer />
</MemoryRouter>
</ApolloProvider>
);
如何测试methodA的AuthFormContainer在这种情况下？
对于单元测试，您不应该担心其他组件。但如果必须，您可以使用浅层渲染。这是我所做的：
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();
尝试find(ApolloProvider).dive()- 和 console.log 以查看里面的树。
对于 React 组件，您总是编写单元测试。根据这个答案：https : //stackoverflow.com/a/652382/2873331：
单元测试只是验证各个代码单元（主要是函数）是否按预期工作......
因此，在这里您应该尝试测试react-router和apollo 客户端是否正确注入上下文的功能，AuthFormContainer而不是测试其功能。你的测试用例应该测试：由于到，做它的实例方法按预期方式工作或没有。contextAuthFormContainer
要注入上下文，您可以使用 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。
始终以不同于连接组件的方式测试包装组件。导出包装器组件并导入到测试文件并按照您的方式进行测试但很浅（我更喜欢）