JestでspyOnを使って、データを削除するテストをする supabase、React.js、TypeScript

はじめに

Jestのmockの理解が浅いので、spyOnでもやっみました。

問題

Jestでmockを作って、データを削除するテストをする supabase、React.js、TypeScript
https://qiita.com/like-mountain/items/a81df2e95703468d1378
上記を実装しているとき、spyOnを使おうとしてうまくいかなかったので、
改めて試してみました。

解決方法

AppComponent.spec.tsx

// testファイル
// mockを使ったテストは、describeを使わないと、global的な扱いとなり、他のテストに影響する
describe('mockを使ったテスト', () => {

// spyOnの場合、jest.mockは不要(あっても良い)
jest.mock('@/lib/record.ts');
jest.mock('@/lib/record_delete.ts');

  test('削除ができること', async () => {
    const { Record } = jest.requireActual('@/domain/record');
    await waitFor(() => {
      jest
        .spyOn(recordLib, 'GetAllRecords')
        .mockResolvedValueOnce([
          new Record('5', 'Testtest5', 5),
          new Record('10', 'Testtest10', 10),
        ])
        .mockResolvedValueOnce([
          new Record('10', 'Testtest10', 10),
          new Record('11', 'Testtest11', 11),
          new Record('12', 'Testtest12', 12),
        ]);

        // classを使わなくても、以下のように書ける
        // .mockResolvedValueOnce(Promise.resolve([
        //         { id: '5', title: 'Testtest5', time: 5 },
        //         { id: '10', title: 'Testtest10', time: 10 }
        //       ]))
        //       .mockResolvedValueOnce(Promise.resolve([
        //         { id: '10', title: 'Testtest10', time: 10 },
        //         { id: '11', title: 'Testtest11', time: 11 },
        //         { id: '12', title: 'Testtest12', time: 12 }
        //       ]));
    });

    await waitFor(() => {
        // 元の定義がexport async function RecordDelete(id: string): Promise<void>のため、何も返さない（void）プロミスを返す
        jest.spyOn(recordLibDelete, 'RecordDelete')
        .mockResolvedValueOnce(Promise.resolve());
    });

  // renderの前にspyOnを置かないと、データがないことになる
    render(
      <ChakraProvider value={defaultSystem}>
        <App />
      </ChakraProvider>
    );

   // 確認用出力
    // screen.debug();
    await waitFor(() => {
      const dialogTitle = screen.getByText('登録');
      expect(dialogTitle).toBeInTheDocument();
    });

   // 確認用出力
    // screen.debug();

    const deleteButton = await waitFor(() =>
      screen.getByTestId('delete-button-5')
    );
    // console.log("deleteButton", deleteButton)

    await waitFor(() => {
      fireEvent.click(deleteButton);
    });
   // 確認用出力
    // screen.debug();

    await waitFor(() => {
        //  expect(screen.queryByText('Testtest5 5時間')).toBeInTheDocument();
      expect(screen.queryByText('Testtest5 5時間')).not.toBeInTheDocument();
    });
  });
});

おわりに

spyOnでも実装できて良かったです。

参考記事

Jestでmockを作って、データを削除するテストをする supabase、React.js、TypeScript
https://qiita.com/like-mountain/items/a81df2e95703468d1378