ここから下で話す際、主に使う言語・フレームワーク・ツールとしては - Typescript - React (Next.js) - Jest - React Testing Library - ブラウザテストツールとしてPlaywright を前提としています。ただ話す内容の本質的な部分はVueでもSvelteでも、Vitestだろうがあまり変わらないだろうなと思ってます。そう思って見ていただけると助かります。 現代ではReactでUIの単体テスト・インテグレーションテストを書く場合、Jest x React Testing Library を使うのが一般的かと思います。皆さんはJestでUIテストを書いていますか？Jestでコンポーネントの単体テストを書いていると辛いことがたくさんありませんか？例えば 大量のライブラリのモックによる(これってテストやる意味あるの・・・？)と感じる虚無感

概要 TypeScript + Jest で画像を単純に import するのが割と難しかったのでメモっておく。 import を通す 普通に画像を import すると VSCode さんに怒られる。 型定義ファイルが必要みたいなので、下記ファイルを作る。 declare module '*.jpg'; declare module '*.jpeg'; declare module '*.png'; 加えて、上記を読みに行ってくれるように tsconfig を変更する。 ... "typeRoots": ["./node_modules/@types", "types"] // types を追加 ... これで、VSCode さんに怒られなくなった。 実行エラーに対応する よし、と思ってテストを実行すると、エラーになる。画像を JS ファイルとして読み込んでいるらしい。 ● Test

Jestの哲学はデフォルトでうまく動作することですが、時にはより細かい設定が必要になることもあります。 設定は、専用の JavaScript、TypeScript、または JSON ファイルで定義することをおすすめします。 ファイル名が jest.config.js|ts|mjs|cjs|json の場合、ファイルは自動的に発見されます。 --config フラグを使用すると、ファイルに明示的なパスを渡すことができます。

はじめに jestは、javascriptやtypescriptのテストツールです。 jest.spyOn()とjest.mock()は、どちらもメソッドをmockするためのもので、テストコードの中でモック関数を定義する際に使用します。 どちらも同じようなことが出来るのですが、いつもいざ使おうとしたときに混同してしまいがちなので、備忘録としてまとめてみました。 環境 テストを作成した環境は、以下の通りです。 node: 12.19.0 @types/jest: 26.0.19 jest: 26.6.3 ts-jest: 26.4.4 ts-node: 9.0.0 typescript: 4.1.2 基本的な使い方 jest.spyOn()は、オブジェクトを引数に指定するのに対し、jest.mock()は、モジュールを引数に指定します。 つまり、mockの対象が引数に指定したオブジェクトだけ

テストを書いている際にしばしば、テストを実行する前にいくつかのセットアップ作業をしたり、テストが終了した後にいくつかの仕上げ作業をしたい場合があります。 Jest はこれらを処理するヘルパー機能を提供します。 繰り返しのセットアップ​ 多くのテストで繰り返し行う必要がある場合は、beforeEach と afterEach フックを使用します。 たとえば、いくつかのテストが City のデータベースと関係するとしましょう。 そしてこれらのテストの前に initializeCityDatabase() を呼び出す必要があり、テストの後にはclearCityDatabase() を呼び出す必要があるとします。 その場合、以下のようにできます: beforeEach(() => { initializeCityDatabase(); }); afterEach(() => { clearCity

Robin Wieruch氏によるHow to use React Testing Library Tutorialを著者の許可を得て意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文： https://www.robinwieruch.de/react-testing-library Kent C. Dodds氏によるReact Testing Library (RTL)がAirbnbのEnzymeに取って代わるものとしてリリースされました。EnzymeはReact開発者にReactコンポーネント内部をテストするためのユーティリティを提供しますが、React Testing Libraryは一歩さがって、「Reactコンポーネントを完全に信頼するためにはどうテストすべきか」を問いかけます。コンポーネントの実装の詳細をテストするのではなく、React Testi