V
V
Vladimir Zykov2020-02-28 09:29:03
Software testing
Vladimir Zykov, 2020-02-28 09:29:03

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

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 the question

In order to leave comments, you need to log in

1 answer(s)
D
Dmitry, 2020-03-03
@disappearedstar

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...

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question