Error when sending a mobx store in a Jest snapshot test

[hybrisCole]

"mobx": "2.7.0",
"mobx-react": "4.0.3",
"react": "~15.3.2",
"react-native": "0.33.1",

const messageState = require('../../../../stores/message/').default;
messageState.mapThreadData([sampleMessage], '585c990579d78b11a4f97ad1');

test('MessageListView', () => {
  const tree = ReactTestRenderer.create(
    <MessageListView messageState={messageState} />
  ).toJSON();
  expect(tree).toMatchSnapshot();
});

The following throws:
Invariant Violation: ReactUpdates: must inject a reconcile transaction class and batching strategy

But, if I do

test('MessageListView', () => {
  const tree = ReactTestRenderer.create(
    <MessageListView messageState={{
    threads : [{
      id : '585c990579d78b11a4f97ad1',
      messages : [sampleMessage],
    }],
    threadMessages : [sampleMessage],
  }} />
  ).toJSON();
  expect(tree).toMatchSnapshot();
});

It won't fire errors, any ideas?

[mweststrate]

There is probably a cleaner solution by using a difference test renderer or something, but this might help: https://medium.com/@wietsevenema/using-jest-with-react-native-and-mobx-34949ea7d2cf#.v11m3rh84

Apologies for the late response!

[mweststrate]

@cpojer does the exception Invariant Violation: ReactUpdates: must inject a reconcile transaction class and batching strategy ring a bell? Searched for it but couldn't find anything tangible. Mobx-react uses reactNative.unstable_batchedUpdates internally, could that give potential issues with the test-renderer?

[cpojer]

yeah might be an issue with the test renderer; it's best to bring this up with the react team.

[winterbe]

@mweststrate @cpojer I'm facing the same problem after updating my ReactNative apps to Mobx 3. The linked medium article whatever solves the error by adding the following:

jest.mock('mobx-react/native', () => require('mobx-react/custom'));

This works great with Jest watch mode but when using Jest without watch the process hangs forever after executing all tests.

Here's a small open source project to reproduce the issue: https://github.com/winterbe/RNTimerExample

Running npm test on this project results in the following output but the process hangs forever at the last line:

❯ npm test

> [email protected] test /Users/winterbe/Projects/RNTimerExample
> jest

 PASS  test/App.test.js
  ✓ renders correctly (115ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 passed, 1 total
Time:        0.992s, estimated 1s
Ran all test suites.

[cpojer]

This means that you aren't properly disabling and unsubscribing from your resources, such as network requests or database connections. Clean up after yourself and it'll work properly!

[winterbe]

@cpojer Thanks for your comment. However the only test is a simple Jest snapshot test:

jest.mock('mobx-react/native', () => require('mobx-react/custom'));

it('renders correctly', () => {
    const component = renderer.create(
        <App />
    );
    const tree = component.toJSON();
    expect(tree).toMatchSnapshot();
});

I guess it's something Mobx related, e.g. observer reactions not properly closed!? @mweststrate

[cpojer]

Yep, seems like that is MobX then. Jest has an escape hatch with --forceExit but we encourage people to fix the underlying issues.

[mweststrate]

Will investigate. Might be that the renderer triggers different lifecycle hooks then expected. Is e.g. componentWillUnmount for `component`? Op di 24 jan. 2017 om 11:46 schreef Christoph Pojer < [email protected]>:

…

Yep, seems like that is MobX then. Jest has an escape hatch with --forceExit but we encourage people to fix the underlying issues. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#186 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABvGhLa79ytuZYj8CFVeqYFjxNybL3bsks5rVdZ9gaJpZM4LUp5-> .

[cpojer]

It's also possible that this particular component that is rendered sets up an interval or something like that.

[mweststrate]

Fair point, if @winterbe does't find something obvious, I'll dive into it later this week Op di 24 jan. 2017 om 11:57 schreef Christoph Pojer < [email protected]>:

…

It's also possible that this particular component that is rendered sets up an interval or something like that. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#186 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABvGhKvwGVEiRIcxLAgsrmW2KJLc4Xr2ks5rVdkigaJpZM4LUp5-> .

[winterbe]

@mweststrate IIRC it's the reaction scheduler which is not disposed at the end of the test suite. When using the following code before test, the message gets logged indefinitely:

jest.mock('mobx-react/native', () => require('mobx-react/custom'));
mobx.extras.setReactionScheduler(() => console.log("scheduling"));

[winterbe]

Good point. I'm using this hook in the tested component. I'll check later if calling he hook manually from test solves the issue. Michel Weststrate <[email protected]> schrieb am Di. 24. Jan. 2017 um 11:51:

…

Will investigate. Might be that the renderer triggers different lifecycle hooks then expected. Is e.g. componentWillUnmount for `component`? Op di 24 jan. 2017 om 11:46 schreef Christoph Pojer < ***@***.***>: > Yep, seems like that is MobX then. Jest has an escape hatch with > --forceExit but we encourage people to fix the underlying issues. > > — > You are receiving this because you were mentioned. > > > Reply to this email directly, view it on GitHub > <#186 (comment) >, > or mute the thread > < https://github.com/notifications/unsubscribe-auth/ABvGhLa79ytuZYj8CFVeqYFjxNybL3bsks5rVdZ9gaJpZM4LUp5- > > . > — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#186 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAdmqWu0bewuQU1OfsI71Tpg8soPbcRLks5rVde_gaJpZM4LUp5-> .

[mweststrate]

Could you try with: mobx.extras.setReactionScheduler((f) => { console.log(" scheduling") f()}); That is the correct signature from the top of my head Op di 24 jan. 2017 om 12:55 schreef Benjamin Winterberg < [email protected]>:

…

Good point. I'm using this hook in the tested component. I'll check later if calling he hook manually from test solves the issue. Michel Weststrate ***@***.***> schrieb am Di. 24. Jan. 2017 um 11:51: > Will investigate. Might be that the renderer triggers different lifecycle > > > hooks then expected. Is e.g. componentWillUnmount for `component`? > > > > > > Op di 24 jan. 2017 om 11:46 schreef Christoph Pojer < > > > ***@***.***>: > > > > > > > Yep, seems like that is MobX then. Jest has an escape hatch with > > > > --forceExit but we encourage people to fix the underlying issues. > > > > > > > > — > > > > You are receiving this because you were mentioned. > > > > > > > > > > > > Reply to this email directly, view it on GitHub > > > > < #186 (comment) > >, > > > > or mute the thread > > > > < > https://github.com/notifications/unsubscribe-auth/ABvGhLa79ytuZYj8CFVeqYFjxNybL3bsks5rVdZ9gaJpZM4LUp5- > > > > > > . > > > > > > > > > > > — > You are receiving this because you commented. > Reply to this email directly, view it on GitHub > <#186 (comment) >, > or mute the thread > < https://github.com/notifications/unsubscribe-auth/AAdmqWu0bewuQU1OfsI71Tpg8soPbcRLks5rVde_gaJpZM4LUp5- > > . > > > > > > > > > > > > > > > > > > > — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#186 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABvGhGJXPuLgjOa8eF3PEVw6IaGeohpvks5rVeaxgaJpZM4LUp5-> .

[winterbe]

OK, it was my fault. Sorry for the inconvenience. I have to unmount the component manually for the test renderer to call componentWillUnmount which in my case has side effects to a mobx store.

So, everything's fine with using the workaround: jest.mock('mobx-react/native', () => require('mobx-react/custom'));

However it would be nice if this workaround won't be necessary.