Trying to test with atomWithStorage

[oobgam]

We're passing initialValues to our provider for testing. The atom used is from atomWithStorage and we're encountering a warning:

Found initial value for derived atom which can cause unexpected behavior {
      toString: [Function: toString],
      read: [Function (anonymous)],
      write: [Function (anonymous)]
}

at createStore (node_modules/jotai/index.js:139:19)
      at createScopeContainer (node_modules/jotai/index.js:836:98)
      at Provider (node_modules/jotai/index.js:870:33)
      at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)
      at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811:13)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:19049:16)
      at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23940:14)

If we use the default atom, the warning goes away.

[dai-shi]

Gooood point. It's surprising that nobody has reported this before. 😅
From the implementation perspective, this is expected because atomWithStorage returns a derived atom, and we can't set values of derived atoms with Provider's initialValues.

I'm not sure what's best to solve this at the moment. I feel like Provider doesn't super fit with testing. Probably, TestProvider might make sense.

Meanwhile, only a suggestion is not to use Provider for testing and use mocking atoms instead. Not sure how it works well. Would love to discuss if this pattern is approachable.

[Nazzanuk]

I'm having this issue currently, are there any examples of mocking atoms in jest?

[dai-shi]

// src/atoms/foo.js
import { atom } from 'jotai';
export const countAtom = atom(0); // we assume jest will transpile this in to CJS (not native ESM).

// src/atoms/__mocks__/foo.js
const { atom } = require('jotai');
exports.countAtom = atom(-1);

Haven't tried it though. Maybe we should use module mocking: https://jestjs.io/docs/ecmascript-modules#module-mocking-in-esm