快照测试反应组件，它依赖于注入 mobx 存储

Question

我一直在试图弄清楚如何对一些注入了 mobx 存储的组件进行简单的快照测试。下面是一个示例：

在根部，我有一个<Provider>在入口点的最后一ReactDOM.render()处包裹整个舍邦。(此处未显示(

// component.js
...{imports}...
@inject('mystore')
@observer
export default class extends React.Component {
render() {
return (
<div>Stuff</div>
)
}
}
// component.test.js
import React from 'react';
import ReactDOM from 'react-dom';
import renderer from 'react-test-renderer';
import Component from './'
it('renders a snapshot', () => {
const tree = renderer.create(<Component/>).toJSON();
expect(tree).toMatchSnapshot();
});

我得到一个失败的测试，因为它缺少树上提供的商店。我尝试导出一个"未修饰"的组件，如下所示：

// in component.js
...{same as above}...
export const undecorated = Component

然后在我的快照测试中导入未修饰的组件，但这不起作用。

想法？

Answer 1

您应该能够像这样显式传递存储：

const tree = renderer.create( <Component.wrappedComponent myStore={store}/>).toJSON(); )