Testing atom state in Jest (React Testing Library) after event inside the component.

Hi all. I’m trying to test a component called CSV, which has two radio buttons that change the value of an atom. I have created the following test.

import { fireEvent, render } from '@testing-library/react'
import { RecoilRoot, snapshot_UNSTABLE } from 'recoil'
import { csvExportTypeAtom } from '../csv.atoms'

describe('CSV should', () => {
  test('select the first radio button.', () => {
    const { getByTestId } = render(
      <RecoilRoot>
        <CSV />
      </RecoilRoot>,
    )
    const component = getByTestId('radio_button_marker_standard')
    fireEvent.click(component)
    const snapshot = snapshot_UNSTABLE()
    expect(snapshot.getLoadable(csvExportTypeAtom).valueOrThrow()).toBe('standard')
  })
})

I get the idea that I’m getting a snapshot from a different atom due to the RecoilRoot context, so I don’t see the updated value after the click event.

How can I access the atom used inside of the RecoilRoot that receives the event?

Is there a better way to do this?

Please, help! I’m new to Recoil, and this is driving me crazy 🙇‍♂️

[timbergus]

Sure! It would be really useful to test the state of the atoms/selectors used by a component because the user’s action can be tested easily by observing the changes the component does in the state. If you want @drarmstr, I could add this solution to the documentation, illustrated with a simple example: https://github.com/facebookexperimental/Recoil/pull/1198.

[timbergus]

In the end, I have implemented an observer as explained here. I pass the atom/selector to be observed and the onChange function to be called when the state changes.

export const RecoilObserver = ({ element, onChange }) => {
  const value = useRecoilValue(element)
  useEffect(() => onChange(value), [onChange, value])
  return null
}

So I can pass a jest.fn() and check whatever I need from the returned value.

const mockFunction = jest.fn()

const { getByTestId } = render(
  <RecoilRoot>
    <RecoilObserver
      element={myAtom}
      onChange={mockFunction}
    />
    <CSV />
  </RecoilRoot>,
)

And it works great 🙂 Thanks a lot @drarmstr.