Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
jefersoneiji opened this issue Oct 14, 2022 · 9 comments · Fixed by #5074
Assignees

Comments

@jefersoneiji
Copy link

jefersoneiji commented Oct 14, 2022

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
Copy link
Contributor

kneth commented Oct 18, 2022

@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

@sync-by-unito sync-by-unito bot added the Waiting-For-Reporter Waiting for more information from the reporter before we can proceed label Oct 18, 2022
@jefersoneiji
Copy link
Author

@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?
realmSlow

@github-actions github-actions bot added Needs-Attention Reporter has responded. Review comment. and removed Waiting-For-Reporter Waiting for more information from the reporter before we can proceed labels Oct 19, 2022
@kneth
Copy link
Contributor

kneth commented Oct 20, 2022

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

@sync-by-unito sync-by-unito bot added Waiting-For-Reporter Waiting for more information from the reporter before we can proceed and removed Needs-Attention Reporter has responded. Review comment. labels Oct 20, 2022
@jefersoneiji
Copy link
Author

jefersoneiji commented Oct 27, 2022

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

realmJest

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.

@github-actions github-actions bot added Needs-Attention Reporter has responded. Review comment. and removed Waiting-For-Reporter Waiting for more information from the reporter before we can proceed labels Oct 27, 2022
@takameyer
Copy link
Contributor

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

@sync-by-unito sync-by-unito bot added Waiting-For-Reporter Waiting for more information from the reporter before we can proceed and removed Needs-Attention Reporter has responded. Review comment. labels Oct 31, 2022
@jefersoneiji
Copy link
Author

jefersoneiji commented Nov 3, 2022

@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?

@github-actions github-actions bot added Needs-Attention Reporter has responded. Review comment. and removed Waiting-For-Reporter Waiting for more information from the reporter before we can proceed labels Nov 3, 2022
@takameyer
Copy link
Contributor

@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 added a commit that referenced this issue Nov 4, 2022
There was a possible optimisation pointed out by issue #5011
For local realm, we could just immediately open a new realm instance
if the sync configuration is not set.  This would skip the fallback
procedure.  It also fixes the jest warning the user was seeing.
@takameyer
Copy link
Contributor

takameyer commented Nov 4, 2022

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

takameyer added a commit that referenced this issue Nov 4, 2022
There was a possible optimisation pointed out by issue #5011
For local realm, we could just immediately open a new realm instance
if the sync configuration is not set.  This would skip the fallback
procedure.  It also fixes the jest warning the user was seeing.
@sync-by-unito sync-by-unito bot removed the Needs-Attention Reporter has responded. Review comment. label Nov 4, 2022
@jefersoneiji
Copy link
Author

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

takameyer added a commit that referenced this issue Nov 10, 2022
There was a possible optimisation pointed out by issue #5011
For local realm, we could just immediately open a new realm instance
if the sync configuration is not set.  This would skip the fallback
procedure.  It also fixes the jest warning the user was seeing.
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 15, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants