React + Emotion + Jest + testing-libraryでテストする

目次

前提・環境

create-react-app で作成したプロジェクトにCSS-in-JSの Emotion でスタイリングするプロジェクト
create-react-app に付属している Jest + testing-library を使用して単体テストします

パッケージバージョン
node.js20.9.0
React18.2.0
@emotion/react11.11.1
jest27.5.1
@testing-library/react14.0.0
TypeScript5.1.6
@types/jest29.5.3

Emotion導入については下記のページを参照してください。

Emotion用テスト準備

インストール

ターミナルにて-D オプションをつけて(テストは開発中のみで本番環境では不要ので)
react-test-renderer@emotion/jestの2つをインストール

yarn add -D react-test-renderer  @emotion/jest

スナップショットの準備

プロジェクトのルートディレクトリ(ルートフォルダ)jest.config.js を作成し、下記のコードを記述します。

module.exports = {
  snapshotSerializers: ['@emotion/jest/serializer']
}

スナップショットの例

css記法での例:

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx, css } from '@emotion/react';
import renderer from 'react-test-renderer';
import { createSerializer } from '@emotion/jest';

expect.addSnapshotSerializer(createSerializer({ DOMElements: false }));

const heading = css`
  color: #fff;
  background: #333;
`;

test('Emotion Test', () => {
  const tree = renderer.create(
    <h1 css={heading}>
      hello world
    </h1>
  ).toJSON();

  expect(tree).toMatchSnapshot();
});

renderではなくrendererを使用するので
import renderer from 'react-test-renderer';

import { createSerializer } from '@emotion/jest';createSerializerをインポートし、
expect.addSnapshotSerializer(createSerializer({ DOMElements: false }));でスナップショットの保存の仕方を指定

css記法を使用する場合は、プラグマが必要
import { jsx } from '@emotion/react';も忘れずに!

通常のスナップショット
const { asFragment } = render(
 <h1 css={heading}>
  hello world
 </h1>
);

expect(asFragment()).toMatchSnapshot();

render().asFragmentを使う

expectのカッコの中にはasFragment()メソッドを入れる
※asFragmentの後に()を付ける

classNameで差分表示、CSSの差分は分からない
Emotion用スナップショット
expect.addSnapshotSerializer(createSerializer({ DOMElements: false }));

const tree = renderer.create(
  <h1 css={heading}>
    hello world
  </h1>
).toJSON();

expect(tree).toMatchSnapshot();

renderer.create().toJSON()を使う

expectのカッコの中には任意のconst変数名を入れる
※任意のconst変数名の後に()を付けない

CSSで差分を確認できる

Emotion用スナップショットではrenderではなくrenderer(ややこしい)
rendererの後ろには.create()メソッド、更にメソッドの後ろには.toJSON()を忘れずに!

最後まで読んでくださりありがとうございました。シェア頂けると嬉しいです!
  • URLをコピーしました!
  • URLをコピーしました!

ABOUT ME

WEB制作者
スキル:HTML・Sass(FLOCSS)・JavaScript・jQuery・WordPress

コメント

コメントする

CAPTCHA

目次