reactjs - 单元测试:用酶反应上下文 api 返回一个空对象
问题描述
我第一次尝试使用 React 上下文 API 将信息从主组件传递到孙组件。
所以首先我创建了一个上下文
const MyContext = React.createContext({});
export default MyContext;
这是设置上下文值的主要组件
import MyContext from "./MyContext.js";
import ParentComponent from "./ParentComponent.js";
function App() {
return (
<div>
<MyContext.Provider value={{ foo: 12 }}>
<ParentComponent />
</MyContext.Provider>
</div>
);
}
父组件不关心上下文,只是在这里创建孙组件
import ChildComponent from "./ChildComponent.js";
class ParentComponent extends Component {
render() {
return (
<div>
Parent
<ChildComponent />
</div>
);
}
}
export default ParentComponent;
这是读取上下文的子组件
import MyContext from "./MyContext.js";
class ChildComponent extends PureComponent {
constructor() {
super();
this.state = {
bar: 456
};
}
render() {
return (
<div>
<MyContext.Consumer>
{({ foo }) => (
<div>
<h1>Hello I'm the ChildComponent</h1>
<h2>Context value: {foo}</h2>
<h2>State value: {this.state.bar}</h2>
<button onClick={() => this.setState({ bar: foo })}>
Click me
</button>
</div>
)}
</MyContext.Consumer>
</div>
);
}
}
export default ChildComponent;
到目前为止没有问题。一切都按预期工作。ChildComponent 已检索上下文值。
当我尝试用 jest/enzyme 测试它时,问题就来了。我无法设置上下文
it("Should test the context value", () => {
let wrapper = mount(<ChildComponent />, {
context: { foo: 987 }
});
expect(wrapper.state("bar")).toEqual(456);
expect(wrapper.context("foo")).toEqual(987);
});
最后一个期望失败并且上下文值是一个空对象。所以 foo 是未定义的
我在这里重新创建了问题: https ://codesandbox.io/embed/x25yop4x5w?fontsize=14
感谢您的帮助
解决方案
我用来测试需要在上下文提供程序树中安装的组件的方法是使用 mount 的wrappingComponent
andwrappingComponentProps
选项。
这确保了 mount(根组件)的返回值仍然是您要测试的组件(并且仍将支持仅适用于根组件的 API/选项,例如setProps
)。
mount(<MyComponent />, {
wrappingComponent: MyContext.Provider,
wrappingComponentProps: {
value: { foo: 987 },
},
})
推荐阅读
- lua - Lua如何从字符串末尾删除“.html”文本
- android - 如何在 Xamarin Forms 中获取设备的 GPS 位置?
- javascript - Cordova Android 权限对话框不会提示
- python - 空格分隔值到 ndarray
- hibernate - 休眠源中缺少包
- tensorflow - tf-slim batch norm:训练/推理模式之间的不同行为
- matlab - 通过在 Matlab 中调用终端命令处理显示的文本信息
- android - 为什么 AOSP 7.1.2 上出现 getpidcon() 错误?
- javascript - 如何在 NodeJS Web 应用程序中存储和访问大文件
- node.js - Graphql 未按预期解决