how test react apps using jest framework
このビデオチュートリアルでは、Jestを使用してReactアプリを作成およびテストし、Jestを使用してモックを作成し、JestspyOnコマンドを使用してスパイ機能をテストする方法を学習します。
に ジェストの完全紹介 前のチュートリアルで与えられました。このチュートリアルでは、Jestを使用してReactベースのアプリをテストする方法を説明します。
簡単なものを使用してブートストラップされたReactアプリを作成する方法を学びます 海抜 ベースのコマンドと同じアプリを使用してJest反応テストを作成します。また、スナップショットテストの概念を探求し、JestフレームワークとJestspyonコマンドを使用してReactコンポーネントをモックおよびスパイする方法を理解します。
学習内容：
React –はじめに
Jestは、他のすべてのJavaScriptフレームワークのサポートとともに、Reactアプリを広範囲にテストするために構築されました。
Reactアプリを使用してJestフレームワークとテストを追加するため、Reactアプリの基本を理解することが不可欠であり、実際に前提条件です。
基本的なReactアプリの使用を開始するには、以下の手順に従ってください。
＃1） Reactアプリを作成するには、ノードパッケージエグゼキューター（つまり、npmに付属しているnpx）を使用して、以下のコマンドを実行するだけです。
npx create-react-app my-app＃二） 上記のコマンドが完了したら、任意のエディターでプロジェクトmy-appを開きます。無料で入手できるVisual StudioCodeをお勧めします。
＃3） ターミナル/コマンドウィンドウ（エディター内）で、以下のコマンドを使用してプロジェクトを実行します。
npm start＃4） プロジェクトがコンパイルされると、URL http：// localhost：3000の新しいブラウザタブが開きます。
＃5） また、Jestに関連するすべての依存関係は、上記のnpxコマンドを使用して作成されたReactプロジェクトの一部としてインストールされることに注意してください。
＃6） このプロジェクトには、jest-domという名前のReactテストライブラリも含まれています。このライブラリには、Jestに役立つカスタムDOM要素マッチャーが多数含まれています。 （小切手 ここに Reactの概念の詳細については）
スナップショットテストがあります
スナップショットテストは、Jestライブラリを使用してReactコンポーネントのスナップショットをテストするための非常に便利な手法です。
まず、スナップショットテストについて理解してみましょう。 本質的に意味します。
スナップショットは、あらゆるものの特定の時点の表現に他なりません。 例えば、 スクリーンショット、カメラの写真などはすべて、ある時点でのあらゆるものの詳細を表すスナップショットです。
Reactの観点からは、スナップショットは、提供された状態と動作を備えたReactコンポーネントの特定の時点の表現または出力に他なりません。
これは、以下の手順を使用した簡単な例で説明されています。
＃1） スナップショットテストを開始するには、以下のコマンドを使用してnpmパッケージ「react-test-renderer」を追加します。
npm i react-test-renderer＃二） それでは、テスト対象のアプリケーションとなる単純なReactコンポーネントを作成しましょう。このコンポーネントは、クラス変数とページプロパティの形式で単純な状態になります。
コンポーネントは次のようになります。このコンポーネントにLinkという名前を付けましょう（したがって、対応するreactコンポーネントのファイル名はLink.react.jsになります）
import React from 'react'; export default class Link extends React.Component { constructor() { super(); this.state = { class: 'normal', welcomeMessage: 'Hi there!' }; } render() { return ( {this.props.page} {this.state.welcomeMessage} ); } } 現時点では、これがファイル構造がReactプロジェクトを検索する方法です。
＃3） このコンポーネントのスナップショットテストを追加しましょう。
に） スナップショットテストを開始するには–react-test-rendererノードパッケージが前提条件です。インストール react-node-renderer 以下のコマンドを使用します。
npm i react-test-rendererb） この新しいコンポーネントのテストを追加するための新しいファイルを追加します。名前を付けましょう Link.test.js
c） 次に、スナップショットテストを追加します。ここでは、最初にReactコンポーネントをレンダリングしてスナップショットを作成します。
テストは次のようになります。
import React from 'react'; import Link from './Link.react' import renderer from 'react-test-renderer'; it('renders correctly', () => { const tree = renderer .create() .toJSON(); console.log(tree) expect(tree).toMatchSnapshot(); }); ここでのテストでは、レンダリングされたコンポーネントのJSON表現を作成しています。 「page」プロパティの値を「www.softwaretestinghelp.com」として渡しました
d） スナップショットテストの実行時–コンポーネントのスナップショットファイルが作成されます（拡張子は 。スナップ ）そしてプロジェクトディレクトリに保存され、次のテスト実行時に再利用されます。
この場合、テスト中に提供されたpageプロパティを持つスナップショットファイルが使用されます。コマンド「npmtest」を使用してテストを実行した後、スナップショットファイルが生成されるのを見てみましょう。
です） スナップショットファイルは、プロジェクトのsrcディレクトリの「__snapshots__」という名前のディレクトリの下に作成されます。
ソフトウェアテストにおける自動化テストとは
以下に、このためのプロジェクト構造を示します。
上のスクリーンショットの「__snapshots__」ディレクトリは、テストが初めて実行されるときにプロジェクトのルートディレクトリに作成されます。
f） スナップショットファイルがどのようになるか見てみましょう。
ファイルを開く– Link.test.js.snap
g） 上に示されているのは、特定のコンポーネントに対して保存されるスナップショットです。
h） ここで、たとえば、上記のコンポーネントの実装が変更されます。 例えば、 プロパティページの名前をコンポーネント内のサイトに変更して、テストをもう一度実行してみましょう。
これがコンポーネントの変更方法です（pageという名前のプロパティをsiteという名前の新しいプロパティに変更しました）。
import React from 'react'; export default class Link extends React.Component { constructor() { super(); this.state = { class: 'normal', welcomeMessage: 'Hi there!' }; } render() { return ( {this.props.site} {this.state.welcomeMessage} ); } } では、もう一度テストを実行してみましょう。プロジェクトディレクトリにすでにスナップショットがあるため、このシナリオではテストが失敗することが予想されます。コンポーネントコードが変更され、古いスナップショットの一致が失敗するためです。
以下に、テストの実行中に得られる結果を示します。
（私） ここで、これらの変更が必要な変更であり、古いスナップショットを更新するためのテストが必要であると想定しましょう。その場合、古いスナップショットを上書きし、コンポーネント自体の新しい変更に基づいて新しいスナップショットを作成するupdateコマンドを使用してテストを実行します。
コマンドを実行
yarn test -u（j） 上記のコマンドと更新されたアサーションを使用すると、テストに合格したことがわかります。
したがって、全体的なスナップショットテストは、コンポーネント全体を最終ビューに対してテストし、古い結果をスナップショットとして保存するための便利な手法です。これにより、コードの変更や機能、さらにはリファクタリングの結果として回帰の問題が発生しないことが保証されます。既存のコンポーネントに。
ビデオチュートリアル：スナップショットテストがあります
ジェストを使ったモック
このセクションでは、Jestモックの使用方法を説明します。モックは、以下に示すようにさまざまな方法で使用できます。
例えば、
- Reactコンポーネント全体をモックする
- 単一または複数の関数のモック–これはJavascript開発フレームワークに固有のものではありません。 Jestは特定のフレームワークに固有ではないjavascriptテストライブラリであるため、Jestを使用して関数を含むプレーンな古いJavascriptファイルをモックすることもできます。
- 関数またはJavascriptコード内で使用されるAPI呼び出しのモック– Jestを使用して、サードパーティ統合からの応答をモックできます。
これらのモック方法のそれぞれについて詳しく説明しましょう。
Reactコンポーネントのモック
React Appは、相互に依存する複数のコンポーネントで構成されています。簡単に理解するために、Reactコンポーネントをクラスとして考えてください–プレゼンテーションとロジックを持っています。
オブジェクト指向プログラミングを使用して構築された複雑なシステムが複数のクラスで構成されているように、同様に、ReactAppはコンポーネントのコレクションです。
ここで、コンポーネントをテストするときに、テストに影響を与える依存関係がないことを確認する必要があります。つまり、テスト対象のコンポーネントが依存している2つのコンポーネントがある場合、依存するコンポーネントをモックする手段がある場合は、次に、テスト対象のコンポーネントをより完全な方法で単体テストできます。
次の図を参考にして、これを理解してみましょう。
ここに、コンポーネント2と3に依存するコンポーネント1があります。
Component1の単体テスト中に、Jest Mocksを使用してComponent2とComponent3を、偽のまたはモックされた対応物に置き換えることができます。
これらのモックを設定する方法を見てみましょう。 div内にHtmlテキストを配置した単純なコンポーネントを使用します。まず、依存コンポーネントのコードを確認します– Component2およびComponent3 。
import React, { Component} from 'react' class Component2 extends Component { render() { return( Hello Component2 ) } } export default Component2 import React, { Component} from 'react' class Component3 extends Component { render() { return( Hello Component3 ) } } export default Component3 それでは、依存するコンポーネントを持つComponent1がどのように見えるかを見てみましょう。ここでは、依存コンポーネントをインポートし、それぞれ＆のような単純なHTMLタグとして使用していることがわかります。
import React, { Component} from 'react' import Component2 from './component2' import Component3 from './component3' class Component1 extends Component { render() { return( Hello Component1 ) } } export default Component1 それでは、このコンポーネントのテストを作成する方法を見てみましょう。テストを作成するには、「src」ディレクトリに「tests」フォルダを作成します。これは、プロジェクトディレクトリをクリーンで整理された状態に保つためだけのものです。
import React, {Component} from 'react' import {render, container} from '@testing-library/react' import Component1 from '../components/component1' // arrange - mock setup jest.mock('../components/component2', () => () => Hello Mock Component2 ) jest.mock('../components/component3', () => () => Hello Mock Component3 ) describe('mock component tests', () => { test('mocked components in react', () => { // act const {container} = render() // assert console.log(container.outerHTML) const mockComponent2 = container.querySelector('div#mockComponent2') const mockComponent3 = container.querySelector('div#mockComponent3') expect(mockComponent2).toBeInTheDocument() expect(mockComponent3).toBeInTheDocument() }) }) 上記のテストファイルでは、関数を使用してコンポーネント1と2をモックしたことがわかります。 is.mock
jest.mock('../components/component2', () => () => Hello Mock Component2 ) この設定は、Component2のすべての呼び出しをこのモック表現に置き換えるだけです。したがって、テストでComponent1をレンダリングすると、モックバージョンのComponent2が呼び出されます。これは、モックdiv要素がドキュメントに存在するかどうかを確認することによってもアサートされています。
ここでは「toBeInTheDocument（）マッチャー」を使用しました。 Reactアプリケーションの最終的なレンダリング出力はHTMLコードにすぎないため、このマッチャーはReact固有です。したがって、このマッチャーは、Reactによって作成されたHTMLドキュメントに存在する特定のHTML要素を探します。
ビデオチュートリアル：Jest –モックReactコンポーネント
Jestを使用したモック機能
それでは、Jestモックを使用して、特定のJavaScriptファイルの特定の関数をモックする方法を見てみましょう。
上の図では、function1の依存関係であるfunction2をfunction2のスタブ/モックバージョンに置き換えていることがわかります。
まず、テスト対象のアプリケーションとして機能するテストJavaScriptファイルを作成し、そこでいくつかのメソッドをモックして、モッキング関数の概念を説明します。
function getFullName(firstname, lastname) { return firstname + ' ' + lastname } function greet(firstname, lastname) { return 'Hello! ' + this.getFullName(firstname,lastname) } module.exports = {getFullName, greet} ここには、greet（）とgetFullName（）の2つの関数があります。 greet（）関数は、getFullName（）を使用してフルネームを取得します。 greet（）メソッドをテストしながら、getFullName（）関数をそのモック実装に置き換える方法を見ていきます。
Jestモック関数を使用してこの動作をモックする簡単なテストを作成し、モックされた関数が呼び出されたかどうかを検証する方法を見てみましょう。
test('illustrate mocks', () => { // arrange const mock = jest.fn().mockReturnValue('mocked name') const greeter = require('../app.js') greeter.getFullName = mock // act const result = greeter.greet('aman', 'kumar') // assert expect(result).toBe('Hello! mocked name') expect(mock).toHaveBeenCalled() expect(mock).toHaveBeenCalledTimes(1) expect(mock).toHaveBeenCalledWith('aman','kumar') }) ここでは、Jestモック関数を宣言し、関数が呼び出されたときに返される「モック名」として戻り値を設定しました。
const mock = jest.fn().mockReturnValue('mocked name')また、モックが呼び出されたことを検証するために、以下に示すようにJestマッチャーを使用できます。
- toHaveBeenCalled（）–モックが呼び出されたかどうかを検証します。
- toHaveBeenCalledWith（arg1、arg2）–指定された引数でモックが呼び出されたかどうかを検証します。
- toHaveBeenCalledTimes（n）–モックが呼び出された回数を検証します。
スパイと呼ばれるジェストの別の機能があります。
では、スパイとは何ですか？また、スパイとモックとの違いは何ですか？
ほとんどの場合、Spiesは実際の関数呼び出しを許可しますが、メソッドの呼び出しに使用された引数などを検証したり、メソッド呼び出しが発生したかどうかを確認したりするために使用できます。
ジェストでのスパイは spyOnがあります コマンド。 Jest spyOnは、引数をオブジェクトおよびスパイされる実際の関数として受け取ります。つまり、実際にテスト対象の関数を呼び出し、中間インターセプターとして機能します。
test('illustrate spy', () => { // arrange const greeter = require('../app.js') const getFullNameSpy = jest.spyOn(greeter, 'getFullName') // act const result = greeter.greet('aman', 'kumar') // assert expect(getFullNameSpy).toHaveBeenCalled() expect(result).toBe('Hello! aman kumar') expect(getFullNameSpy).toHaveBeenCalledWith('aman','kumar') }) したがって、上記のコードでは、次のことを確認できます。
（私） 以下のコマンドを使用して、メソッド「getFullName」のスパイを設定しました。
Javaプログラムは質問と回答を面接します
const getFullNameSpy = jest.spyOn(greeter, 'getFullName')（ii） アサーションでは、スパイが予期された引数で呼び出されたことを確認しています。
expect(getFullNameSpy).toHaveBeenCalled() expect(getFullNameSpy).toHaveBeenCalledWith('aman','kumar') Jest spyOnコマンドを使用して、以下のコマンドを使用して実際の関数の代わりに呼び出す必要のあるモック実装を指定することもできます。
const getFullNameSpy = jest.spyOn(greeter, 'getFullName').mockImplementation()この場合、実際の関数呼び出しは、スパイで設定されたモック実装に置き換えられます。
ビデオチュートリアル：Jest-モックAPI関数
Jestを使用した外部API呼び出しのモック
次の図では、function1が外部APIエンドポイントを呼び出していることがわかります。 例えば –成功または失敗の応答を提供する支払いパートナーエンドポイントを呼び出す。
この関数の単体テストを作成しているとき、テストが実行されるたびに外部エンドポイントを呼び出すことは期待できません。
テストで外部エンドポイントを呼び出さないようにする理由はいくつかあります。
- 費用がかかる場合があります。
- その応答を制御することはできません。予想されるすべての応答コードとエラーコードを常にテストできるとは限りません。
- 常に利用できるとは限りません。外部エンドポイントが利用できない場合、テスト結果は不安定になります。
これらすべての理由から、外部エンドポイントの動作を制御およびスタブ化し、関数の堅牢な単体テストを作成できれば非常に便利です。
Jestフレームワークを使用してモックAPI呼び出しを実現する方法を見てみましょう。 Axiosは、以下のコマンドを使用してプロジェクトにダウンロード/追加できるNPMモジュールです。
npm install --save-dev axios以下に示すように、「axios」モジュールを使用して、テスト関数でAPI呼び出しを行います。
function getUserData() { axios.get('https://reqres.in/api/users/2') .then(response => console.log(response.data)) .catch(error => console.log(error)); } 偽のデータを返し、成功とエラーの応答をログに記録するダミーの外部エンドポイントに到達しています。
ここで、単体テストでは、axiosモジュールをモックし、関数がこの外部エンドポイントを呼び出すと、偽の応答またはモックされた応答を返します。
テストコードは次のようになります。
const axios = require('axios') jest.mock('axios'); describe('mock api calls', () => { test('mocking external endpoint in axios', () => { // arrange const mockedResponse = {data: {username:'test-user', address:'India'}} axios.get.mockResolvedValue(mockedResponse) const app = require('../app.js') // act app.getUserData() // asserts expect(axios.get).toHaveBeenCalled() expect(axios.get).toHaveBeenCalledWith('https://reqres.in/api/users/2') }) }) ここでは、ここで「axios」モジュール全体をモックしていることを理解することが重要です。つまり、テストの実行中にAxiosモジュールに送信される呼び出しは、モックされた実装に送信され、テストで構成された応答を返します。
モジュールは、以下のコマンドを使用してモックされます。
const axios = require('axios') jest.mock('axios'); 以下のコマンドを使用してモックを構成しました。
axios.get.mockResolvedValue(mockedResponse)このようにして、外部APIエンドポイントからの応答をモックできます。ここでは「GET」エンドポイントを使用しましたが、POST、PUTなどの他のエンドポイントにも同じアプローチを使用できます。
ビデオチュートリアル：Jest-モックAPIエンドポイント
結論
このチュートリアルでは、簡単なReactアプリを作成する方法を学び、Jest Reactを使用してReactコンポーネントのスナップショットテストを実行したり、Reactコンポーネント全体をモックしたりする方法を学びました。
また、メソッドの実際の実装を呼び出し、呼び出しの数、メソッドが呼び出された引数などをアサートするインターセプターとして機能するJestspyOnコマンドを使用したJest関数とSpying関数を使用したモックについても説明しました。
前のチュートリアル | 次のチュートリアル