この記事の概要 Next.js + TypeScriptのプロジェクトにJestを導入する手順を解説した記事です。 対象読者 Next.jsを触った事がある人 TypeScriptの基礎的な知識がある人 Jestについて基礎的な知識がある人 この記事を書こうと思った動機 最近Next.jsで個人開発を始めました。 Next.jsはReactベースのフレームワークです。 Reactの create-react-app に似たcreate next-appというコマンドがあります。(プロジェクトのテンプレートを自動生成するツールです) ただしReactの create-react-app と違ってテスト実行環境は用意されていません。 そこでJESTを導入する手順を残しておきます。 実行環境 Node.js 14.15.3 Next.js 11.1.2 React 17.0.2 具体的な手順とゴ
モック関数によりコード間の繋がりをテストすることができます。 関数が持つ実際の実装を除去したり、関数の呼び出し(また、呼び出しに渡されたパラメータも含め)をキャプチャしたり、new によるコンストラクタ関数のインスタンス化をキャプチャできます。 そうすることでテスト時のみの返り値の設定をすることが可能になります。 関数をモックするには、次の2つの方法があります。 1つは、テストコードの中でモック関数を作成するという方法。 もう1つは、manual mockを作成してモジュールの依存性を上書きするという方法です。 モック関数を利用する forEach 関数の実装をテストすることを考えてみましょう。 この関数は、与えられた配列の各要素に対して、コールバック関数を呼び出します。
Introduction 恥ずかしながら Javascript で Unit テストを書いたことがなかったんですが、ふとと思いたって導入してみました。 PHP の Unit テストや E2E は書いたことあるんですが、どれもメリデメが大きいというか、「正しく投資すれば正しくメリットを享受できる」っていうイメージでした。 そもそもフロントにテストいれてどの程度有用なのかっていうのがイメージしづらいなーって思ってました。 View の開発時にテスト駆動開発みたいなのやろうと思うと「それブラウザ見たほうが早くね?」みたいな。 でもまぁものは試し、と思って Storybook や Redux にテスト入れてみようと思ったらこれが非常に便利。 ということで非常に感動した Snapshot テストについて書いていこうと思います。 どんなテストが有用か そもそも Javascript でテストを書く場合
morishitaです。 時々、業務で使うツールをGASで作ります。 これまでのものはキャンペーン対応のものなど使い捨てとまでは言わないまでも、短い運用期間を想定したものでした1。 サービスレベル的にはベータレベルですが、少し運用期間が長くなりそう、かつプロトタイプ性が強くて変更が継続しそうなツールを作ることになったので、ちゃんとテストしようと思ってやってみました。 試したもの 次の要素を含むGASのプロジェクトでJestのユニットテストを導入しました。 @google/clasp 2.1.0 jest 24.8.0 Typescript ついでにこれも。 eslint 6.0.1 + @typescript-eslint/eslint-plugin 1.11.0 紹介するサンプルコードはこちらです。 gas-ts-jest-eslint-sample セットアップ 何はともあれ、必要なN
TypeScript で書いている React アプリで、ユニットテストも TypeScript で書くようにするための手順。 テスティングフレームワークはJestで、ReactコンポーネントのテストをしやすくするためにEnzymeも使う。 また、アサーションライブラリとしてPower Asse…
前回の記事はこちら。 JestでReactのテストをする(1) 導入編 前回で、JestとReactの環境構築が終わった。 以降は、個人的に特に習得したいと思っている、イベントとDOMのテストに取り組む。 今回は、イベントのテストについて。 クリックイベントの挙動をテストする Reactでの開発に限らず、ウェブアプリケーションにおいては、ユーザーによるクリックをトリガーにしてイベントを起こす、というのが一般的だと思われる。 クリックによって何かが送信されたり、表示が切り替わったり。 そのため、クリックイベントの挙動を確認できないと、テストとしては不十分なものになってしまう。 Jestでは、enzymeというツールと組み合わせることで、Reactのコンポーネントにセットしたイベントを簡単にテストできる。 airbnb/enzyme: JavaScript Testing utilities
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く