Aquí hay una versión simplificada de mi componente:

 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> ) }); } }

Y aquí está mi prueba (usando broma y enzima):

 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(); } ); }); });

El problema es que el controlador para when está en prueba se ejecuta antes del método de renderizado, por lo que no tengo acceso al marcado renderizado allí. Mi pregunta es cómo ejecutar mis códigos de except después de representar el estado cumplido. Además, no quiero hackear mi componente. Aquí estoy usando wrapper.instance().warehouse que no me gusta mucho.

En general, la pregunta sería cómo probar componentes con estados observables en ellos.