Testing: how to hydrate atomFamily?

[rovolution]

Hello,

My application uses an atomFamily for create / caching atoms that map to a set of listings in my app (each listing has its own atom because it can be updated without affecting the others).

When writing tests for this, how do I use useHydrateAtoms() to hydrate the atomFamily? A bit confused since the useHydrateAtoms() hook examples seems to take a list of atoms + the mock value for the specific static atom (and atoms created via atomFamily can be dynamically created).

[dai-shi]

useHydrateAtoms is for some specific cases such as hydration with SSR. It's not specifically for testing, and I would avoid using it for testing and look for other solutions.

[dai-shi]

Good point. I think in the past it looked like a good idea. But, now looking it again, I think we should use store api instead for testing, if we use <Provider>.

[dai-shi]

const CounterProvider = () => {
  const store = createStore()
  store.set(countAtom, 100)
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  )
}

[rovolution]

does createStore() work with atomFamily? or only specific atoms?

[dai-shi]

Specific atoms. You have to create atoms with your family function.

[dmaskasky]

import {
  Provider as JotaiProvider,
  atom,
  atomFamily,
  createStore,
} from 'jotai'

const fooFamily = atomFamily(() => atom(0))

const store = createStore()

/** resets all atoms in family */
function resetFamily() {
  Array.from(fooFamily.getParams(), fooFamily)
    .forEach((fooAtom) => {
      store.set(fooAtom, fooAtom.init)
    })
}

function Component({ param }) {
  const [value, setValue] = useAtom(fooFamily(param))
  ...
}

function wrapper({ children }) {
  return (
    <JotaiProvider store={store}>
      {children}
    </JotaiProvider>
  )
}
render(Component, { wrapper, props: { param: 0 } })
...
act(resetFamily)
...