Initializing Recoil Root for Jest/React-testing-library unit testing

Hi! I’m having a hard time setting up a testing environment to mock my recoil state to test my component.

Getting error: Uncaught [Error: Missing definition for RecoilValue: “undefined”"]

I’m using atomFamily for my selectedRateState so that I can use a selector as default value but replicating this to test is proving quite difficult. If I switch selectedRateState to just atom like for currentRateInformation then I think it works. but I will need access to my selectors in default value which I can’t if I use atom. Any help would be appreciated.

/store/atom

export const currentRateInformation = atom({
    key: 'currentRateInformation',
    default: undefined,
});

export const selectedRateState = atomFamily({
    key: 'selectedRateState',
    default: getSelectedRate,
});

/selectors

export const getSelectedRate = selectorFamily({
    key: 'getSelectedRate',
    get: (id) => async () => {
        try {
            const { data } = await apiClient.getSelectedRate(id);
            const rateInfo = extractRelevantRateInfo(data);
            return rateInfo;
        } catch (error) {
            console.error('getSelectedRate error', error);
            throw error;
        }
    },
});

RateDetails.tsx

export const RateDetails = withI18n()(({ rateId, i18n, onBackClick }: any) => {
    const rate = useRecoilValue(selectedRateState(rateId));

    return (
        <>
            <StyledButtonContainer>
                <Button
                    data-testid="expanded-page-back-button"
                    secondary
                    icon={<ChevronIcon />}
                    label={i18n._('back')}
                    onClick={onBackClick}
                    size="medium"
                />
            </StyledButtonContainer>
         ...
        </>
    );
});

RateDetails-test.tsx

import React from 'react';
import { fireEvent, waitFor, render } from '@testing-library/react';
import { RecoilRoot } from 'recoil';

import { currentApplicationIdState, selectedRateState } from 'store/atom';
import { product } from 'components/rates/rate-page-subsection.test';

import { RateDetails } from '../[rateId]';

describe('Expanded Page', () => {
    const initializeState = ({ set }: any) => {
        set(currentApplicationIdState, 123);  <--- this works
        set(selectedRateState, () => product); <--- fails here
    };
    it('RateDetails: back button should go back', async () => {
        const backMock = jest.fn();

        const { findByTestId } = render(
            <RecoilRoot initializeState={initializeState}>
                <RateDetails rateId="16996" onBackClick={backMock} />
            </RecoilRoot>
        );

        const backButton = await findByTestId('expanded-page-back-button');

        fireEvent.click(backButton);
        expect(backMock).toHaveBeenCalled();
    });
});

[drarmstr]

What is the issue you are trying to report? I see this comment in your source:

   set(selectedRateState, () => product); <--- fails here

This shouldn’t work because selectedRateState is an atom family, not an atom, so it is a function you need to call to get the actual atom.

   set(selectedRateState(id), () => product);

[itsankitverma]

This thread helped me a lot. Thanks for sharing.