ユニットテスト

Jest

参考

使い方

例

import sum from './math.js';

describe('sum', () => {
  test('sums up two values', () => {
    expect(sum(2, 4)).toBe(6);
  });
});

describe はテストスイート
test はテストケース
- テストスイートは複数のテストケースを持ちますが、テストケースは必ずテストスイートに含まれるわけではありません
- テストケース内に記述するものはアサーション（例. Jestのexpect）と呼ばれ、成功（緑）か失敗（赤）のどちらかになります
expect(value) はテスト対象を指定します。
- 指定方法は引数に入れるだけ
- toBeはテストマッチャーという
- 他にもさまざまな種類のものがある

他の基本事項については基本的に上記参考の - Facebook製のJavaScriptテストツール「Jest」の逆引き使用例 -Qiita にすべて解説されている

スナップショットテスト

Jest

参考

Integrationテスト

react-testing-library

参考

概要

React Testing LibraryはJestの代わりにはならない。相互に依存し、それぞれが明確な担当領域を持つ。
JestはReactコンポーネントについては何もしない。
- Jestはテストランナーであり、コマンドラインからJestでテストを実行する能力を提供する
- Jestはテストスイート、テストケースやアサーションのための関数を持っている
React Testing Libraryは、Jestとは対象的にReactコンポーネントをテストするためのテストライブラリの1つ
- この分野で人気のもう1つのライブラリがEnzyme。

インストール

create-react-appを使用している場合、React Testing Libraryは標準で含まれている
自前でReactセットアップ（例. WebpackでReact）もしくは他のReactフレームワークを使用している場合は、React Testing Libraryも自分でインストールする必要がある
- npm install --save-dev @testing-library/react

使い方

公式のIntroduction

`describe`,`test`

describe,testについてはJestと同様

describe はテストスイート
test はテストケース
- テストスイートは複数のテストケースを持ちますが、テストケースは必ずテストスイートに含まれるわけではありません
- テストケース内に記述するものはアサーション（例. Jestのexpect）と呼ばれ、成功（緑）か失敗（赤）のどちらかになります

Imports

// import dependencies
import React from 'react'

// import API mocking utilities from Mock Service Worker
import {rest} from 'msw'
import {setupServer} from 'msw/node'

// import react-testing methods
import {render, fireEvent, waitFor, screen} from '@testing-library/react'

// add custom jest matchers from jest-dom
import '@testing-library/jest-dom'
// the component to test
import Fetch from '../fetch'

test('loads and displays greeting', async () => {
  // Arrange
  // Act
  // Assert
})

Mock

省略

Arrange

`render`メソッド

RTLのrender関数は、任意のJSXを受け取ってレンダリングします。その後、テスト内でReactコンポーネントにアクセスできるようになる。(RTLのscreenを利用)
- その確認のため、RTLのdebug関数を利用できる

import React from 'react';
import { render, screen } from '@testing-library/react';

import App from './App';

describe('App', () => {
  test('renders App component', () => {
    render(<App />);

    screen.debug();
  });
});

コマンドラインでテストを実行すると、AppコンポーネントのHTMLを確認できます。
- React Testing Libraryでコンポーネントをテストする際は、まず最初にコンポーネントをレンダリングしてから、テスト内のRTLのレンダラーで見えるものをデバッグしていきます
React Testing Libraryは、Reactコンポーネントと人間のように対話するために使用される
- 人間が見るものがReactコンポーネントからHTMLとしてレンダリングされるため、実装の内部（フックや複数のコンポーネントから生成されているかどうか、など）に関心を持たない

renderメソッドの補足（Screen vs Renderクエリ）

react-testing-library - Screen vs Render queries - StackOverflow
react-testing-libraryを使用してクエリを使用するには、2つの方法がある
react-testing-libraryの作者であるKent C. Dodds氏自身が推奨する最新のオプションは、screenを使用することである。（上記URL参考）

renderクエリ


import React from 'react'
import { render } from '@testing-library/react'

...

const { getByText } = render(

Foo

)

expect(getByText('Foo')).toBeInTheDocument()


2. `Screen`
``` js
import React from 'react'
import { render, screen } from '@testing-library/react'

...

render(<div>Foo</div>)

expect(screen.getByText('Foo')).toBeInTheDocument()

`beforeEach`,`afterEach`

beforeEach で一度だけrenderメソッドを呼び出すのがよい

describe('ToDoアプリ', () => {
  // 前準備
  beforeEach(() => {
    render(<App />);
  });

afterEachでcleanupを行うか
- 公式の説明
- 使用しているテストフレームワークがafterEachグローバルをサポートしており、テスト環境に注入されている場合、自動的に行われます（mocha、Jest、Jasmineなど）。
- そうでない場合は、各テスト後に手動でクリーンアップを行う必要があります。

import {cleanup, render} from '@testing-library/react'
import test from 'ava'

test.afterEach(cleanup)

test('renders into document', () => {
  render(<div />)
  // ...
})

// ... more tests ...

Act,Assertion の準備

要素の選択

RTLのscreenオブジェクト関数で要素の選択を始めることができます。
- 選択された要素はユーザーインタラクションやアサーションで使用されます。
- アサーションでDOMに要素が含まれているかどうか確認しましょう。

import React from 'react';
import { render, screen } from '@testing-library/react';

import App from './App';

describe('App', () => {
  test('renders App component', () => {
    render(<App />);

    expect(screen.getByText('Search:')).toBeInTheDocument();
  });
});

便利なことに、getByTextは要素が取得できなかった時はエラーをスローします。
- expectで明示的なアサーションを書く代わりに暗黙的なアサーションとして利用する人もいます。

import React from 'react';
import { render, screen } from '@testing-library/react';

import App from './App';

describe('App', () => {
  test('renders App component', () => {
    render(<App />);

    // 暗黙的なアサーション
    // 存在しない場合はエラーを吐くため明示的なアサーションを書かなくてもよい
    screen.getByText('Search:');

    // 明示的なアサーション
    // こちらの方が推奨される書き方
    expect(screen.getByText('Search:')).toBeInTheDocument();
  });
});

getByText関数は正規表現も利用できます。
- 文字列の引数が完全一致であるのに対し、正規表現は部分一致となるため、より役に立つでしょう。

import React from 'react';
import { render, screen } from '@testing-library/react';

import App from './App';

describe('App', () => {
  test('renders App component', () => {
    render(<App />);

    // fails
    expect(screen.getByText('Search')).toBeInTheDocument();

    // succeeds
    expect(screen.getByText('Search:')).toBeInTheDocument();

    // succeeds
    expect(screen.getByText(/Search/)).toBeInTheDocument();
  });
});

検索のタイプ

公式のチートシート
getByText
getByRole
- 公式の対応表
getByLabelText
getByPlaceholderText
getByAltText
getByDisplayValue

検索バリエーション

`getBy`

`queryBy`

要素が存在しないことをアサーションする場合にはqueryByを使い、それ以外の場合は標準でgetByを使う
```
import React from 'react';
import { render, screen } from '@testing-library/react';
```

import App from './App';

describe('App', () => { test('renders App component', () => { render();

expect(screen.queryByText(/Searches for JavaScript/)).toBeNull();

}); });

###### `findBy`
- [findByをいつ使うか？ - Qiita](https://qiita.com/ossan-engineer/items/4757d7457fafd44d2d2f#findby%E3%82%92%E3%81%84%E3%81%A4%E4%BD%BF%E3%81%86%E3%81%8B)

###### 複数
- `getBy`、`queryBy`、`findBy` ⇒ これらは全て1つの要素だけを返す
- 複数の要素（例. [Reactコンポーネントのリスト](https://www.robinwieruch.de/react-list-component)）をアサーションするには**All**で拡張できます。
  - `getAllBy`
  - `queryAllBy`
  - `findAllBy`

#### Act
- [説明-公式](https://testing-library.com/docs/ecosystem-user-event/)
- `userEvent` APIは`fireEvent` APIよりも実際のブラウザに近い振る舞いをする
- React Testing Libraryを使う時は、可能な限り**fireEventよりもuserEventを使うように心がけ**てください。現時点では、userEventはfireEventの全ての機能を含んではいませんが、将来的に変更される可能性があります。

``` js
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import App from './App';

describe('App', () => {
  test('renders App component', async () => {
    render(<App />);

    // wait for the user to resolve
    await screen.findByText(/Signed in as/);

    expect(screen.queryByText(/Searches for JavaScript/)).toBeNull();

    await userEvent.type(screen.getByRole('textbox'), 'JavaScript');

    expect(
      screen.getByText(/Searches for JavaScript/)
    ).toBeInTheDocument();
  });
});

Assert

通常の全てのアサーション関数はJest由来
React Testing LibraryはこのAPIをtoBeInTheDocumentのような独自のアサーション関数で拡張します
- 独自のアサーション関数は全て別パッケージに含まれますが、create-react-appを使っていれば最初からセットアップされています。
toBeDisabled
toBeEnabled
toBeEmpty
toBeEmptyDOMElement
toBeInTheDocument
toBeInvalid
toBeRequired
toBeValid
toBeVisible
toContainElement
toContainHTML
toHaveAttribute
toHaveClass
toHaveFocus
toHaveFormValues
toHaveStyle
toHaveTextContent
toHaveValue
toHaveDisplayValue
toBeChecked
toBePartiallyChecked
toHaveDescription

// assert that the alert message is correct using
// toHaveTextContent, a custom matcher from jest-dom.
expect(screen.getByRole('alert')).toHaveTextContent('Oops, failed to fetch!')

// assert that the button is not disabled using
// toBeDisabled, a custom matcher from jest-dom.
expect(screen.getByRole('button')).not.toBeDisabled()

Haramaki0326 / StudyToDo

フロントエンドのテストについて（ユニットテスト（Jest）,スナップショットテスト（Jest）, Integrationテスト（react-testing-library）, E2Eテスト（cypress）） #74

ユニットテスト

Jest

参考

使い方

スナップショットテスト

Jest

参考

Integrationテスト

react-testing-library

参考

概要

インストール

使い方

`describe`,`test`

Imports

Mock

Arrange

`render`メソッド

renderメソッドの補足（Screen vs Renderクエリ）

`beforeEach`,`afterEach`

Act,Assertion の準備

要素の選択

検索のタイプ

検索バリエーション

`getBy`

`queryBy`

Assert

E2Eテスト

cypress

ロケータ（要素の特定方法）について

参考

Haramaki0326 / StudyToDo

フロントエンドのテストについて（ユニットテスト（Jest）,スナップショットテスト（Jest）, Integrationテスト（react-testing-library）, E2Eテスト（cypress）） #74

ユニットテスト

Jest

参考

使い方

スナップショットテスト

Jest

参考

Integrationテスト

react-testing-library

参考

概要

インストール

使い方

describe,test

Imports

Mock

Arrange

renderメソッド

renderメソッドの補足（Screen vs Renderクエリ）

beforeEach,afterEach

Act,Assertion の準備

要素の選択

検索のタイプ

検索バリエーション

getBy

queryBy

Assert

E2Eテスト

cypress

ロケータ（要素の特定方法）について

参考

`describe`,`test`

`render`メソッド

`beforeEach`,`afterEach`

`getBy`

`queryBy`