单元测试:用酶反应上下文 api 返回一个空对象
[英] Unit testing: react context api with enzyme return an empty object
本文介绍了单元测试:用酶反应上下文 api 返回一个空对象的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我第一次尝试使用 React 上下文 API 将信息从主组件传递到孙组件.
所以首先我创建了一个上下文
const MyContext = React.createContext({});导出默认的 MyContext;
这里是设置上下文值的主要组件
从./MyContext.js"导入MyContext;从./ParentComponent.js"导入ParentComponent;功能应用(){返回 (<div><MyContext.Provider value={{ foo: 12 }}><父组件/></MyContext.Provider>
);}
父组件不关心上下文,只是在这里创建孙组件
从./ChildComponent.js"导入 ChildComponent;类父组件扩展组件{使成为() {返回 (<div>家长<子组件/>
);}}导出默认父组件;
这里是读取上下文的子组件
从./MyContext.js"导入MyContext;class ChildComponent 扩展 PureComponent {构造函数(){极好的();this.state = {酒吧:456};}使成为() {返回 (<div><MyContext.Consumer>{({ foo }) =>(<div><h1>你好,我是 ChildComponent</h1><h2>上下文值:{foo}</h2><h2>状态值:{this.state.bar}</h2><button onClick={() =>this.setState({ bar: foo })}>点击我按钮>
)}</MyContext.Consumer>
);}}导出默认子组件;
目前没有问题.一切都按预期工作.ChildComponent 已检索到上下文值.
当我尝试用笑话/酶测试它时,问题就出现了.我无法设置上下文
it(应该测试上下文值", () => {让包装器 = mount(, {上下文:{ foo: 987 }});期望(wrapper.state(bar")).toEqual(456);期望(wrapper.context(foo")).toEqual(987);});
最后一个期望失败并且上下文值是一个空对象.所以 foo 是未定义的
我在这里重现了这个问题:https://codesandbox.io/embed/x25yop4x5w?fontsize=14
感谢您的帮助
解决方案
Enzyme context
影响遗留的 React 上下文,而不是现代的上下文 API.它应该被嘲笑:
mount(<MyContext.Provider value={{foo: 987}}><ChildComponent/></MyContext.Provider>)
并断言:
expect(wrapper.find('h2').text()).toBe('Context value: 987');
I am trying for the first time to use React context API to pass information from a main component to a grandchild component.
So first I have created a context
const MyContext = React.createContext({});
export default MyContext;
Here is the main component that sets the value of the context
import MyContext from "./MyContext.js";
import ParentComponent from "./ParentComponent.js";
function App() {
return (
<div>
<MyContext.Provider value={{ foo: 12 }}>
<ParentComponent />
</MyContext.Provider>
</div>
);
}
The parent component doesn't care about the context and is just here to create the grandchild component
import ChildComponent from "./ChildComponent.js";
class ParentComponent extends Component {
render() {
return (
<div>
Parent
<ChildComponent />
</div>
);
}
}
export default ParentComponent;
And here is the child component that reads the context
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;
So far no problem. Everything works as expected. The ChildComponent has retrieved the context value.
The problem comes when I try to test it with jest/enzyme. I can't manage to set the context
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);
});
The last expect fails and the context value is an empty object. So foo is undefined
I have recreated the problem here:
https://codesandbox.io/embed/x25yop4x5w?fontsize=14
Thank you for your help
解决方案
Enzyme context
affects legacy React context, not modern context API. It should be mocked with:
mount(<MyContext.Provider value={{foo: 987}}><ChildComponent/></MyContext.Provider>)
And asserted with:
expect(wrapper.find('h2').text()).toBe('Context value: 987');
这篇关于单元测试:用酶反应上下文 api 返回一个空对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!