单元测试：用酶反应上下文api返回一个空对象

Question

我第一次尝试使用React上下文API将信息从主要组件传递给他的孙组件。

所以首先我创建了一个上下文

这是定义上下文的主要组件

父组件不关心上下文，而只是在这里创建大子组件

这是读取上下文的子组件

到目前为止没有问题。一切正常。ChildComponent已检索到上下文值。

问题出在我尝试用开玩笑/酶进行测试时。我无法设置上下文

最后一个期望失败，并且上下文值是一个空对象。所以foo是不确定的

我在这里重新创建了问题：https : //codesandbox.io/embed/x25yop4x5w?fontsize=14

谢谢您的帮助

Answer 1

酶context影响传统的React上下文，而不影响现代的上下文API。应该用：

mount(<MyContext.Provider value={{foo: 987}}><ChildComponent/></MyContext.Provider>)

并宣称：

expect(wrapper.find('h2').text()).toBe('Context value: 987');

Answer 2

我用来测试需要安装在上下文提供程序树中的组件的方法是使用wrappingComponent和wrappingComponentProps 选项 mount。

这可以确保 mount（根组件）的返回值仍然是您要测试的组件（并且仍将支持仅适用于根组件的 API/选项，例如setProps）。

mount(<MyComponent />, {
  wrappingComponent: MyContext.Provider,
  wrappingComponentProps: {
    value: { foo: 987 },
  },
})