Zenn
Open2

@testing-libraryの備忘録

React
Jest
ut
TypeScript
Yamato AizawaYamato Aizawa

ReferenceError: ResizeObserver is not defined

ResizeObserver は、要素のサイズ変更を監視するために使用されるブラウザの API。
しかし、Jest は、デフォルトでブラウザ環境を模倣していないため、この API は定義されていない。

なので、ResizeObserver をモックすることでこのエラーを解決できる。

module.exports = {
  // ...
  setupFilesAfterEnv: ['./jest.setup.ts'],
};

// jest.setup.ts
class MockResizeObserver {
  observe(): void {
    // do nothing
  }

  unobserve(): void {
    // do nothing
  }

  disconnect(): void {
    // do nothing
  }
}

(global as any).ResizeObserver = MockResizeObserver;
Yamato AizawaYamato Aizawa

router.query をモックして、それぞれのテストケースでクエリパラメータの値を変えるには

const mockRouterPush = jest.fn()
let mockQuery = {key: 'hoge'}

jest.mock('next/router', () => ({
  useRouter(): Pick<NextRouter, 'push' | 'query'> {
    return {
      push: mockRouterPush,
      query: mockQuery,
    }
  },
}))

describe('===ViewComponent', () => {
  beforeEach(() => {
    // それぞれのテストケースごとにリセットする
    mockQuery = {key: 'hoge'}
  })

  it('クエリパラメータに該当するコンテンツが表示されている (hoge)', async () => {
    render(<ViewComponent />)
    // なにかのアサーション
    // ...
  })

  it('クエリパラメータに該当するコンテンツが表示されている (fuga)', async () => {
    // クエリパラメータを更新する
    mockQuery = {key: 'fuga'}

    render(<ViewComponent />)
    // なにかのアサーション
    // ...
  })
})

上記のように query をモックし、beforeEach ブロックを使用して、それぞれのテストケースで query を変更する。

query の初期値を格納する変数を定義し、それを jest.mock 内で使用する。その後、各テストケースで beforeEach ブロックを使って、query の値を変更する。