使用 React、react-router、jest 和 enzyme 测试状态变化

Question

我正在尝试通过测试来验证有状态组件的状态在componentDidMount中是否适当地更改了，但由于反应路由器而碰壁。

我正在使用酶，所以我使用mount来评估生命周期方法，例如componentDidMount。通常，这工作得很好...

it("changes state after mount", () => {
const newValue = "new value";
const testPropertyRetriever = () => newValue;
const wrapper = mount(
<StatefulPage
myProperty="initial value"
propertyRetriever={testPropertyRetriever}
/>
);
// componentDidMount should have executed and changed the state's myProperty value
//     from "initial value" to "new value"
expect(wrapper.instance().state.myProperty).toEqual(newValue);
});

。但是有问题的组件是有问题的，因为mount渲染了几个子级，在这种情况下，其中一个后代使用 反应路由器的<Link>.因此，运行上述测试会导致错误：TypeError: Cannot read property 'history' of undefined和Failed context type: The context `router` is marked as required in `Link`, but its value is `undefined`.

react-router 文档建议将需要上下文的组件的测试渲染(例如，使用 react-router 的<Link>)与<MemoryRouter>或<StaticRouter>一起使用，但这不起作用，因为这会使被测试组件成为子组件而不是 ReactWrapper 的根目录，这使得(据我所知)无法检索被测试组件的状态。(给定上面的例子...

// ...
const wrapper = mount(
<MemoryRouter>
<StatefulPage
myProperty="initial value"
propertyRetriever={testPropertyRetriever}
/>
</MemoryRouter>
);
expect(wrapper.childAt(0).instance().state.myProperty).toEqual(newValue);

。测试失败，错误ReactWrapper::instance() can only be called on the root)。

我很快了解到，酶的mount采用选项参数，允许将上下文传递到渲染中，这正是 react-router 所需要的。所以我尝试删除路由器包含并提供上下文(基于这个答案)......

//...
const wrapper = mount(
<StatefulPage
myProperty="initial value"
propertyRetriever={testPropertyRetriever}
/>,
{ router: { isActive: true } }
);
expect(wrapper.instance().state.myProperty).toEqual(newValue);

。但这会导致我开始时关于上下文类型的相同错误。要么我没有正确传递上下文，要么我不知道如何将上下文传递给需要它的后代，要么没有办法(使用这些工具)这样做。

从这里开始，我一直在寻找如何存根上下文或模拟其中一个组件的细节，但还没有设法有效地将拼图组合在一起以成功编写和运行此测试。

当组件具有依赖于满足 react-router 模块的上下文的后代时，如何验证组件的状态是否由componentDidMount更改？

Answer 1

提供给挂载功能的路由器定义不完整。

const MountOptions = {
context: {
router: {
history: {
createHref: (a, b) => {
},
push: () => {
},
replace: () => {
}
}
}
}, childContextTypes: {
router: PropTypes.object
}
};
const wrapper = mount(
<StatefulPage
myProperty="initial value"
propertyRetriever={testPropertyRetriever}
/>,
MountOptions
);