Enzyme tests(snapshot) don't work if the component under test has @observer(mobx) annotation, how to fix it?

Question

Software testing

Hi all! I have a problem with writing tests for a project. The project has store mobx. Enzyme tests (snapshot) do not work if the component under test has an @observer (mobx) annotation.

I get an error:

Test suite failed to run TypeError: Cannot read property 'componentWillReact' of undefined

Test:

const props = {
  store: {...store},
};

describe('ViewModal component testing', () => {

  it('mount to dom', async () => {
    const component = shallow(
            <Provider {...props}>
                <ViewModal />
            </Provider>);
    expect(component).toMatchSnapshot();
  });
});

Component to test:

@inject('store')
@observer
export default class ViewModal extends React.Component<IProps> {
   componentDidMount() {
     this.props.store.getItem();
   }

  render() {
    const {item} =  this.props.store;
    return (
        <Row>
            {item}
        </Row>
    );
  }
}

If @observer is removed, the test will succeed. How to successfully run a test with @observer in a component?
I did not find an answer on the Internet.

Answer 1

By using shallow, you only render the observer and don't go deeper.
The case is described in the documentation: https://github.com/mobxjs/mobx-react#testing-store...