@realm/react causes an error during render phase (jest) and realmjs version 10.21.1 is missing a module during test (Jest)

[jefersoneiji]

How frequently does the bug occur?

All the time

Description

Hello, RealmJs team. Thank you for this open source library. During integration testing (using Jest), these two problems happened:

• When using RealmJs (10.21.1), Jest had a problem using realm
  The specified module could not be found. \?\C:\Users\code_\Downloads\training\realmJest\node_modules\realm\build\Release\realm.node
  The module exists in node_modules, Jest just had a hard time trying to find it.
• After downgrading it to v10.20.0, the problem went away and another one happened

  console.error
    Warning: An update to null inside a test was not wrapped in act(...).

    When testing, code that causes React state updates should be wrapped into act(...):

    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */

    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
        at C:\Users\code_\Downloads\training\realmJest\node_modules\@realm\react\src\RealmProvider.tsx:70:13
        at App

Stacktrace & log output

Full log of first problem
 ● Test suite failed to run

    The specified module could not be found.
    \\?\C:\Users\code_\Downloads\training\realmJest\node_modules\realm\build\Release\realm.node

      at Runtime._loadModule (node_modules/jest-runtime/build/index.js:893:29)
      at bindings (node_modules/bindings/bindings.js:112:48)
      at getRealmConstructor (node_modules/realm/lib/index.js:28:37)

Full log of second problem
$ jest
  console.error
    Warning: An update to null inside a test was not wrapped in act(...).

    When testing, code that causes React state updates should be wrapped into act(...):

    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */

    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
        at C:\Users\code_\Downloads\training\realmJest\node_modules\@realm\react\src\RealmProvider.tsx:70:13
        at App

      at printWarning (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:72:30)
      at error (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:46:7)
      at warnIfUpdatesNotWrappedWithActDEV (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16666:9)
      at scheduleUpdateOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14807:5)
      at setRealm (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7407:16)
      at node_modules/@realm/react/src/RealmProvider.tsx:121:9

Can you reproduce the bug?

Yes, always

Reproduction Steps

repository with the problems mentioned

To reproduce the first issue:

1. Install the repository provided
2. yarn start
3. yarn android
4. yarn test

To reproduce the second issue:

1. yarn add realm@10.20.0
2. yarn test

Version

10.21.1 and 10.20.0

What SDK flavour are you using?

Local Database only

Are you using encryption?

No, not using encryption

Platform OS and version(s)

Android 10

Build environment

 System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i5-1035G1 CPU @ 1.00GHz
    Memory: 1.74 GB / 19.80 GB
  Binaries:
    Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
    Watchman: 20210110.135312.0 - C:\ProgramData\chocolatey\bin\watchman.EXE
 npmPackages: 
    jest: ^26.6.3 => 26.6.3
    react: 18.1.0 => 18.1.0
    react-native: 0.70.3 => 0.70.3
    realm: ^10.17.0 => 10.17.0
    typescript: ^4.8.3 => 4.8.4

Cocoapods version

No response

[kneth]

@codelearnerrr Thank you for taking the time to report.

The issue with v10.21.1 is that a migration to Github Actions broke our Windows builds. It has been fixed in v10.22.0.

From the second error message it looks like you are using @realm/react. Which version do you use? In the past we have had a couple of issues with Jest e.g., #4762

[jefersoneiji]

@kneth . Thank you for taking the time to answer. After updating realm to 11.0.0, the The specified module could not be found. problem went away.

If i understood correctly, the issue #4762 deals with asserting the Realm Provider after its rendered. The jest act(() =>{}) warning (in my case) is thrown in during render phase. So, how to approach testing in this scenario? This happens in every single component that uses realm...

it('renders correctly', () => {
//component with @realm/react (realm provider) 
render(<App />);
});

Besides the act warning, its slow too. What should i do to fix it?

[kneth]

By reading https://reactjs.org/docs/test-utils.html#act I think that wrapping it with act(() => {}) might be a good idea.

[jefersoneiji]

Alright, @kneth. I tried to wrapp render within act() and because act() unmounts the component render() just breaks.

So, is there anything that can be changed within @realm/react to fix the issue of:

• Whenever a component using realm provider is rendered, jest throws the act() warning?

PS: By reading the C:\Users\code_\Downloads\training\realmJest\node_modules\@realm\react\src\RealmProvider.tsx:70:13 line it seems that some type of asynchronicity withing @realm/react broke Jest render() function.

[takameyer]

@codelearnerrr Unfortunately, simply rendering <App /> will return null for realm, as the realm is set after the initial render. We provide a fallback property on RealmProvider which allows one to show an alternate component until the realm has opened. It's possible that a single 0 timeout would allow for the realm to be opened. It does seem strange that the realm is taking so long to open. Can you make sure the realm data is deleted before each run of the tests? Perhaps it has gotten too large.

I would recommend using react-native-testing-library in your jest tests, which provide some good tools to handle component rendering. We also have written very comprehensive integration tests for @realm/react, which are written in jest and use react-native-testing-library.

Hope this helps. Let us know if you are still having issues.

[jefersoneiji]

@takameyer thank you for taking the time to answer.

• Unfortunately, simply rendering <App /> will return null for realm, as the realm is set after the initial render.
  Makes sense since act() only "sees" the first render, before any re-render i guess.

• We provide a fallback property on RealmProvider which allows one to show an alternate component until the realm has opened.
  Even when adding a fallback component to the component using realm, the warning persisted. Like this

• It's possible that a single 0 timeout would allow for the realm to be opened.
  If i understood correctly setting afterEachTimeout to zero like this line was supposed to fix it.

• I would recommend using react-native-testing-library in your jest tests, which provide some good tools to handle component rendering.
  Yes. it was used in the reproduction repository. When the act() warning was first reported it already used react-native-testing-library.

• It does seem strange that the realm is taking so long to open. Can you make sure the realm data is deleted before each run of the tests? Perhaps it has gotten too large.
  Sure. Actually, the database in the reproduction repository was empty (zero realms present) and nothing being written in it.

• We also have written very comprehensive integration tests for @realm/react, which are written in jest and use react-native-testing-library.
  I see. Even by emulating this approach for instance, the warning peristed.

• Hope this helps. Let us know if you are still having issues.
  Jest is just doing what's supposed to it works well with other libraries than @realm/react (react-navigation for instance). This leads me to think the root cause is inside @realm/react. Can i count on @realm/react team to investigate @realm/react source code and maybe fix it?

[takameyer]

@codelearnerrr I ran your code and the warning about act is indeed there. The tests only took 1 second to run, so I'm not seeing an issue with speed here. I will investigate if we can get the warnings to disappear, but it's not as trivial as it seems. The RealmProvider will change state almost immediately after it is rendered, and somehow this isn't being registered in the act. According to this issue, the warning is a mild annoyance, but not an actual error that one should worry about. Also, one should not wrap render in act, as render uses act under the hood.
In any case, I'll look into it, but this shouldn't hold you back from your development.

[takameyer]

@codelearnerrr I have a PR that will fix this (#5074). I read into it, and it since the realm is being set by an async function, it is difficult for act to determine that the state change has finished within a render. This fix sets the realm immediately for local realms. I feel this is a good optimisation to have anyway, as this would remove a possible flicker when rendering the app on slower devices.

[jefersoneiji]

@takameyer

• In any case, I'll look into it, but this shouldn't hold you back from your development.
  That's a major relief. The act() warning usually is a sign of serious trouble in the test suite.

• I have a PR that will fix this (https://github.com/realm/realm-js/pull/5074).
  I'm attentive to the next release. Thank you for taking the time to look into it.

• I read into it, and it since the realm is being set by an async function, it is difficult for act to determine that the state change has finished within a render.
  This explains a lot. And this is why the jest warning pointed to an async section of the @realm/react code.

So, i will consider this issue as solved. That's all.