UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

Jest

【Jest】window.location.hrefの値を検証したい

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

【Jest】StorybookのStoryを再利用してテストする

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

【Redis】Redisクライアントをモック化したい

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

【Jest】throwされたエラーをテストしたい

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

【MSW】Jestでwhatwgのfetch APIをmock化しようとするとエラーになった

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

【Testing Library】JestとTesting Library

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

【MSW】Jest で MSW を使う

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

【Jest】関数をmock化したときに型チェックエラーになる

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

【Jest】mock化した関数の戻り値を条件で変えたい

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

【Jest】testをtypescriptで書いたらCannot find name 'test'. と言われる

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

【Jest】APIのレスポンス結果をモック

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

【Jest】WebpackのDefinePluginで定義した定数の扱い

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

【Jest】テストは全てsuccessなのにexit statusが 1

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…

【Jest】スナップショットテスト

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