Question

我对MobX注入装饰器的理解是，使用Enzyme，我应该能够在我的单元测试中简单地初始化一个商店，然后作为道具传递给我正在安装的组件。 [src：https://semaphoreci.com/community/tutorials/how-to-test-react-and-mobx-with-jest并滚动到“集成测试”部分。]但我一直让商店不可用！错误。这往往是一个问题，特别是如果我注入多个商店。

所以在我的组件中：

export default inject('errorStore', 'someOtherStore', 'andTheThirdStore')(observer(MyComponent));

我的测试应该是这样的。

import errorStore from './stores/errorStore';
import someOtherStore from './stores/someOtherStore';
import andTheThirdStore from './stores/andTheThirdStore';
import Component from './components/Component';

describe('My Component', () => {
  someOtherStore.initializeWithData('./examples','TEST-123-45678-90', 'USERID');
  andTheThirdStore.initialize();
  const storeProp = { errorStore, someOtherStore, andTheThirdStore };

  beforeEach(() => {
      const wrapper = mount(<Component {...storeProp} />
  }

  it ('does all the things', () => {...});

我是否需要其他类型的提供者，或者我只是遗漏了一些明显的东西？

Answer 1

据我所知，您的设置是正确的。你有可重复的设置吗？请注意，您也可以使用wrappedComponent直接装入原始组件，另请参阅this issue中的示例

Answer 2

在MyComponent：

中

export default inject('errorStore', 'someOtherStore', 'andTheThirdStore')(observer(MyComponent));

在export default下面添加另一行：

export const  undecorated = MyComponent

在您的testCase import {undecorated as MyComponent} from './MyComponent'

中

对于您的商店，在进行纯单元测试时，无需初始化创建样本商店对象。

在上面的例子中：

create const errorStore={}.

如果您是单元测试，还有一件事使用shallow代替mount。

单元测试难以注入多个存储的MobX观察器组件

2 个答案: