Issue testing `recoil-sync` with `vitest`

Author: patwalraviCreated Sep 6, 2023Updated Jun 18, 2024

Hello,

I am facing an issue with testing recoil-sync with vitest.

Versions:

"recoil": "^0.7.2",
"recoil-sync": "^0.2.0",
"vitest": "^0.34.3",

Below is a basic simple test file using recoil-sync:

import { render, screen } from '@testing-library/react';
import React from 'react';
import { RecoilRoot } from 'recoil';
import Sync from 'recoil-sync';

const TestComponent = () => {
  return (
    <RecoilRoot>
      <React.Suspense fallback={null}>
        <Sync.RecoilSync
          storeKey={'RecoilSyncWithUrlContext'}
          read={() => {
            return "test";
          }}
        >
          <h1>test</h1>
        </Sync.RecoilSync>
      </React.Suspense>
    </RecoilRoot>
  );
};
describe('Testing ReoilSync', () => {
  it('should render something', async () => {
    render(<TestComponent />);
    expect(
      await screen.findByText("test")
    ).toBeInTheDocument();
  });
});

Getting the following error on running test (even though the RecoilState wraps the element):

Error: This component must be used inside a <RecoilRoot> component.
 ❯ err node_modules/recoil/cjs/index.js:22:17
 ❯ Object.notInAContext node_modules/recoil/cjs/index.js:4181:9
 ❯ node_modules/recoil/cjs/index.js:3985:90
 ❯ memoizedFn node_modules/recoil/cjs/index.js:3620:17
 ❯ cloneSnapshot node_modules/recoil/cjs/index.js:3993:20
 ❯ node_modules/recoil/cjs/index.js:5760:52
 ❯ mountState node_modules/react-dom/cjs/react-dom.development.js:16986:20
 ❯ Object.useState node_modules/react-dom/cjs/react-dom.development.js:17699:16
 ❯ useState node_modules/react/cjs/react.development.js:1622:21
 ❯ useRecoilSnapshot node_modules/recoil/cjs/index.js:5760:35

Steps to produce:

Create an app using CRA.
Install recoil, recoil-sync & vitest.
Create a test file using above snippet to src directory.
Run tests using command : yarn vitest

Any thoughts on what might be causing the issue and how can I resolve it.

Thanks a lot :)

Source: facebookexperimental/Recoil

View original on GitHub View discussion on GitHub