next/routerを利用しているコンポーネントを単体でテストする場合にはNext Routerのモックを事前に作成しておく必要があります。 以下のようにnext/routerを利用している場合に import { useRouter } from 'next/router'; export const Component = () => { const router = useRouter(); return (<h1>{router.pathname}</h1>) } 次のようなtestを書くと、router.pathnameがundefindになるとエラーになってしまいます。 import React from 'react'; import { render, screen } from '@testing-library/react'; import Component fro

はじめに こんにちは、CX事業本部MAD事業部の森茂です。 今回まだ開発版ではありますが、昨年末に公開されたVue.jsやViteの作者Anthony Fu氏@antfu7、Patak氏@patak_devが開発しているJestに代わるあたらしい高速テストフレームワークVitestをReactで試してみました。 VitestはVite環境で動作する高速なテストフレームワークで、VueやReact、Svelte、litなどなどさまざまなフレームワークで動作します。ChaiやJestのアサーション、スナップショットが互換的に動作するので既存のテストコードをほぼ同じ書き方で利用することができます。またc8を利用したcoverageの作成にも対応しています。 Jestでは環境の構築にそれなりの手間がかかりますが、Vitestはライブラリのインストールと簡単な設定を追記するだけで利用することが可能で