测试解构的上下文消费者
Testing destructured Context consumer
我正在尝试使用 Jest + Enzyme 测试一个组件,确保组件作为我的消费者的子组件呈现。当我这样做时,类似的测试有效:
<FormContextConsumer>
{({ ...props }) => (
<Footer
...
/>
)}
</FormContextConsumer>
像这样模拟上下文:
jest.mock("../../context/FormContext", () => ({
FormContextConsumer: props => props.children()
}));
然后这样测试:
it(`should render a 'Footer' component inside the 'FormContextConsumer'`, () => {
expect(
shallowTestComponent()
.find(FormContextConsumer)
.dive()
.find(Footer).length
).toBe(1);
});
但是当我像这样解构上下文道具时:
<FormContextConsumer>
{({ handleSubmit, handleReset }) => (
<Drawer
...
>
{children}
</BaseEntityDrawer>
)}
</FormContextConsumer>
并用这个测试:
it(`should always render 'Drawer' inside 'FormContextConsumer'`, () => {
expect(
shallowTestComponent()
.find(FormContextConsumer)
.dive()
.find(Drawer).length
).toBe(1);
});
我收到这个错误:
TypeError: Cannot destructure property `handleSubmit` of 'undefined' or 'null'.
我假设这与我模拟模块的方式有关,但我不清楚如何使其适应这种情况。我该如何解决这个问题?
多亏了 stephenwil 在这里的回答,我才能够弄明白:
我将模拟上下文更改为:
jest.mock("../../../forms/context/FormContext", () => {
const handleSubmit = jest.fn();
const handleReset = jest.fn();
return {
FormContextConsumer: props => props.children({ handleSubmit, handleReset })
};
});
我的测试正常!
我正在尝试使用 Jest + Enzyme 测试一个组件,确保组件作为我的消费者的子组件呈现。当我这样做时,类似的测试有效:
<FormContextConsumer>
{({ ...props }) => (
<Footer
...
/>
)}
</FormContextConsumer>
像这样模拟上下文:
jest.mock("../../context/FormContext", () => ({
FormContextConsumer: props => props.children()
}));
然后这样测试:
it(`should render a 'Footer' component inside the 'FormContextConsumer'`, () => {
expect(
shallowTestComponent()
.find(FormContextConsumer)
.dive()
.find(Footer).length
).toBe(1);
});
但是当我像这样解构上下文道具时:
<FormContextConsumer>
{({ handleSubmit, handleReset }) => (
<Drawer
...
>
{children}
</BaseEntityDrawer>
)}
</FormContextConsumer>
并用这个测试:
it(`should always render 'Drawer' inside 'FormContextConsumer'`, () => {
expect(
shallowTestComponent()
.find(FormContextConsumer)
.dive()
.find(Drawer).length
).toBe(1);
});
我收到这个错误:
TypeError: Cannot destructure property `handleSubmit` of 'undefined' or 'null'.
我假设这与我模拟模块的方式有关,但我不清楚如何使其适应这种情况。我该如何解决这个问题?
多亏了 stephenwil 在这里的回答,我才能够弄明白:
我将模拟上下文更改为:
jest.mock("../../../forms/context/FormContext", () => {
const handleSubmit = jest.fn();
const handleReset = jest.fn();
return {
FormContextConsumer: props => props.children({ handleSubmit, handleReset })
};
});
我的测试正常!