「received value must be an HTMLElement or an SVGElement. Received has value: undefined」エラーが出る (Jest、React、TypeScript)

問題

Jestで以下エラーになった。

• mockはテストケースごとに.spyOnで作成している
• mockは正しく書けていて、mockを使った3つのテストで、それぞれ単体だとパスする
• だが、3つ一気にテストすると、以下エラーが出る

● テストケースの名前
    invalid input syntax for type uuid: "101"

● テストケースの名前
    expect(received).toBeInTheDocument()

    received value must be an HTMLElement or an SVGElement.
    Received has value: undefined

解決方法

• moockを使った2番目のテストのみ、idをuuidではなく数字の文字列にしていたことが原因
• 2番目のテストも、idをuuidにしたところ、テストが通った

該当箇所ソースコード

test.tsx

import { v4 as uuidv4 } from 'uuid';

// 省略

describe('mockを使ったテスト', () => {
  jest.mock('@/lib/record.ts');
  jest.mock('@/lib/record_delete.ts');

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

// 省略

  test('isLoadingがfalseの場合、データテーブルを表示する', async () => {
    const { Record } = jest.requireActual('@/domain/record');
    const validUUID1 = uuidv4();
    const validUUID2 = uuidv4();
    const validUUID3 = uuidv4();
    const validUUID4 = uuidv4();
    await waitFor(() => {
      jest
        .spyOn(recordLib, 'GetAllRecords')
// それぞれ1番目の引数が数字の文字列だとエラー
        // .mockResolvedValueOnce([
        //   new Record('51', 'Testtest51', 51),
        //   new Record('101', 'Testtest101', 101),
        // ])
        // .mockResolvedValueOnce([
        //   new Record('101', 'Testtest101', 101),
        //   new Record('111', 'Testtest111', 111),
        //   new Record('121', 'Testtest121', 121),
        // ]);

// それぞれ1番目の引数をuuidにすると通る
        .mockResolvedValueOnce([
            new Record(validUUID1 , 'Testtest51', 51),
            new Record(validUUID2, 'Testtest101', 101),
          ])
          .mockResolvedValueOnce([
            new Record(validUUID2, 'Testtest101', 101),
            new Record(validUUID3, 'Testtest111', 111),
            new Record(validUUID4, 'Testtest121', 121),
          ]);
    });

// 省略

  test('編集して登録すると更新される', async () => {
        const { Record } = jest.requireActual('@/domain/record');
        const validUUID1 = uuidv4();
        const validUUID2 = uuidv4();
        jest
          .spyOn(recordLib, 'GetAllRecords')
          .mockResolvedValueOnce([
            new Record(validUUID1, 'Testtest50', 50),
            new Record(validUUID2, 'Testtest100', 100),
          ])
          .mockResolvedValueOnce([
            new Record(validUUID1, 'English', 8),
            new Record(validUUID2, 'Testtest100', 100),
          ]);

// 省略

終わりに

エラーは想定外のことが原因だったりするので、経験を積んで視野を広げます。