如何使用mobx可观察状态测试react组件

Question

以下是我的组件的简化版本：

import React from 'react';
import { observable, action } from 'mobx';
import { observer } from 'mobx-react';
import { fromPromise } from 'mobx-utils';

@observer
export class MyComponent extends React.Component {
  @action componentDidMount() {
    const { store, params } = this.props;
    this.warehouse = store.findById(params.id);
  }

  @observable warehouse = fromPromise(Promise.resolve());

  render() {
    return this.warehouse.case({
      fulfilled: (value) => (
        <div>
          fulfilled
        </div>
      ),
      rejected: (error) => (
        <div>
          rejected
        </div>
      ),
      pending: () => (
        <div>
          pending
        </div>
      )
    });
  }
}

下面是我的测试(使用jest和酶)：

import React from 'react';
import { mount } from 'enzyme';
import toJson from 'enzyme-to-json';
import { observable, when } from 'mobx';
import { fromPromise } from 'mobx-utils';

import { MyComponent } from './MyComponent';

describe('<MyComponent>', () => {
  it('should render correctly for state "fulfilled"', (done) => {
    const mockStore = observable({
      findById: jest.fn(() => fromPromise(Promise.resolve({ id: 'id' })))
    });

    const wrapper = mount(<MyComponent store={mockStore} params={{ id: '1' }} />);
    const wh = wrapper.instance().warehouse;

    when(
      () => wh.state === 'fulfilled',
      () => {
        expect(wrapper.text()).toBe('fulfilled');

        done();
      }
    );
  });
});

问题是测试中的when处理程序在render方法之前运行，所以我无法访问那里呈现的标记。我的问题是如何在呈现已履行状态后运行我的except代码。另外，我也不想修改我的组件。这里我使用的是我不太喜欢的wrapper.instance().warehouse。

通常，问题是如何测试其中具有可观察状态的组件？

Answer 1

我最终得到了这个解决方案：

import React from 'react';
import { mount } from 'enzyme';
import toJson from 'enzyme-to-json';
import { observable, when } from 'mobx';
import { fromPromise } from 'mobx-utils';

import { MyComponent } from './MyComponent';

describe('<MyComponent>', () => {
  it('should render correctly for state "fulfilled"', (done) => {
    const mockStore = observable({
      findById: jest.fn(() => fromPromise(Promise.resolve({ id: 'id' })))
    });

    const wrapper = mount(<MyComponent store={mockStore} params={{ id: '1' }} />);
    const wh = wrapper.instance().warehouse;

    when(
      () => wh.state === 'fulfilled',
      () => {
        process.nextTick(() => {
          expect(wrapper.text()).toBe('fulfilled');
          done();
        });
      }
    );
  });
});

在mobx-react项目issues中还有一个相关的问题。