Jestをv29に上げたら以下のエラーが発生した ● Validation Error: Test environment jest-environment-jsdom cannot be found. Make sure the testEnvironment configuration option points to an existing node module. Configuration Documentation: https…

以前にRedisクライアントをモック化する方法を調べたが、全てにこれを行うのが大変なのでグローバルにモック化したい uga-box.hatenablog.com 基本的には、上記の記事で紹介したredis-mockを使うのは変わらないが、グローバルなmockとするために __mocks__/r…

フレームワークをNext.jsへ移行することを考えている このとき、Jestで書いたテストもNext.jsに移行することを考えているが、ドキュメントを読むとNext.js 12 のリリース以降、Next.jsにはnext/jestという組み込みモジュールが用意されていることを知った ま…

TypeScirptのプロジェクトでpathにaliasを設定して、/srcディレクトリを@としてimportしたい まずはtsconfig.jsonでpathsを設定する { "compilerOptions": { ~~~ "baseUrl": "./", "paths": { "@/*": ["src/*"] }, ~~~ } } 次にwebpack.config.jsでaliasを設…

あるクリックイベントの中で、最後window.location.hrefで画面遷移させているコンポーネントをテストしたい JestはNode環境で動いているので、何もせずテストでexpect(window.location.href).toBe(expected)と書いてもWeb標準のwindowがないためエラーになっ…

StorybookのStoryをJestに取り込んでコンポーネントのテストをしたい このとき、必要なライブラリは以下だとわかった @testing-library/react @storybook/testing-react @testing-library/jest-dom @testing-library/reactはReactの仮想DOMを操作するのに必…

Redisを使っているプロジェクトでJestでテストが失敗するのでRedisをモック化したい 調べたらredis-mockがよさそう www.npmjs.com 基本的な使い方 import redis from 'redis-mock' jest.mock('redis', () => redis) 毎回これを記述するのは大変なのでjest.co…

Jestでthrowされたエラーをテストしたく調べたのでメモ jestjs.io これがドキュメントにあった使い方 rejectされたpromiseの理由を取り出すには .rejectsを使用する // .rejectsを使う it('tests error with rejects', () => { expect.assertions(1); return…

JestとMSWでReactコンポーネントのfetch部分をmock化しようとしたらエラーになった ReferenceError: fetch is not defined whatwgのfetchはブラウザでしか使えないのでJest（node）で使うにはpolyfillが必要 jest.config.js const fetchPolyfill = require('…

Reactコンポーネントのテストを何を使ってやるかの話で、これまでCypressを導入してテストをしてきたが実行時間が長いのでテストが増えてきて億劫になってきた 画面のキャプチャを保存する機能は重宝しているのでCypressを使い続けるにしても、Cypressの頻度…

Jestで外部APIとのAdapterのテストをしたい JestでMock化してもよいが、テスト以外でもそのモックを使用したいので以前調べたMSWを使うことにした uga-box.hatenablog.com ちょうどそんな時、以下の記事が公開されたので参考にさせてもらった zenn.dev zenn.…

モジュールをモック化するときにjest.mock(...) 関数を使えばモックにすることができる jestjs.io Jestのドキュメントにはaxiosを使った例がある // users.test.js import axios from 'axios'; import Users from './users'; jest.mock('axios'); test('shou…

ある関数のテストを書いているとき、その関数内で呼び出している別の関数（fetchしている関数）をモックにしている このときテストするロジックが以下の場合 fetchの取得結果が５件以下の場合は、検索条件を変えてもう一度検索する 検索条件に応じたモックの…

jestで書いていたテストをtypescript化しようと思うが、あるエラーが発生しておりできずにいた ただ、さすがに不便になってきたので調べてみる 事象はエディタ（IntelliJ IDEA）で次のようなエラーメッセージが表示される Cannot find name 'test'. Do you n…

Jestで外部のAPIとやりとりするRepositoryをモック化して、テストしやすくしたい jestjs.io まず、importしているRepositoryをモック化する import { findById as findFooById } from "../../repository/FooRepository"; jest.mock("../../repository/FooRep…

以前webpackのDefinePluginを使ってFirebase SDKの初期設定値を環境ごとに変えられるようにした uga-box.hatenablog.com 結果的に以下のように__FB_API_KEY__のように定義可能となったのだが、Jestでテストを実行する際にここがundefineとなってしまう const…

JESTでテストを書いていて全てのテストが通るようになったのだが、最後npm run jestのexit statusが1で終了してしまう Snapshot Summary › 1 snapshot file obsolete from 1 test suite. To remove it, run `npm run jest -- -u`. Test Suites: 23 passed, 2…

あるコンポーネントを修正した結果、予期せぬページが変更されており表示崩れを起こしていた これを防ぐためスナップショットを導入したい スナップショットテストは、一度レンダリングされたコンポーネントの状態を保存しておき、テストを実行する度にその…