Recoilのtest

Custome Hookでのatomの変更をテストする

code:ts

test('Test useMyCustomHook', () => {

const {result} = renderHook(() => useMyCustomHook(), {

wrapper: RecoilRoot,

});

expect(result.current).toEqual(0);

});

React Component内の状態の遷移を確認する

mock関数経由でatomの内容を見る

こういうのを用意しておく

code:ts

export const RecoilObserver = <T,>({

node,

onChange,

}: {

node: RecoilState<T>;

onChange: (value: T) => void;

}) => {

const value = useRecoilValue(node);

return null;

};

こうやって使う

code:ts

describe('The form state should', () => {

test('change when the user enters a name.', () => {

const onChange = vi.fn();

render(

<RecoilRoot>

<RecoilObserver node={nameState} onChange={onChange} />

<Form />

</RecoilRoot>,

);

const component = screen.getByTestId('name_input');

fireEvent.change(component, {target: {value: 'Recoil'}});

expect(onChange).toHaveBeenCalledTimes(2);

expect(onChange).toHaveBeenCalledWith(''); // Initial state on render.

expect(onChange).toHaveBeenLastCalledWith('Recoil'); // New value on change.

});

});

test時にatomを用意するときにkeyをユニークにしないといけないのダルい

非同期

code:ts

it('updateLine', async () => {

const { result, waitForNextUpdate } = renderRecoilHook(useMock);

await act(async () => {

result.current.f.updateLine(0, 'hogehoge');

await waitForNextUpdate();

});

});