# React/Jest/react-testing-library環境構築

まずはViteの環境を作る
ただしここは課題2ですでにプロジェクトがあるので不要
ライブラリインストールからやる

❯ npm create vite@latest
Need to install the following packages:
  create-vite@5.2.0
Ok to proceed? (y) y
✔ Project name: … react-jest-sample
✔ Select a framework: › React
✔ Select a variant: › JavaScript

Scaffolding project in /home/watanabejin/react-jest-sample...

Done. Now run:

  cd react-jest-sample
  npm install
  npm run dev

jestとreact-testing-libraryをインストール

npm install --save-dev jest @testing-library/react @testing-library/jest-dom @testing-library/user-event babel-jest @babel/preset-env @babel/preset-react

## Jestの確認

jest.config.mjsというファイルを作成する

export default {
  testEnvironment: "jsdom",
  moduleNameMapper: {
    "\\.(css|less)$": "identity-obj-proxy",
  },
  setupFilesAfterEnv: ["./jest.setup.js"],
};

jest.setup.jsを作る
これはテストが走る際に実行されるグローバルな設定を書いておくスクリプト

import "@testing-library/jest-dom";

// dotenvの設定
require("dotenv").config();

ここでテスト環境でも.envの環境変数を使えるようにしたいのでdotenvというライブラリを使っている。これもインストールする

npm i dotenv

.eslintrc.cjsを修正する(VSCodeで利用していない変数がエラーになるを防ぐ)

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:react-hooks/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
  settings: { react: { version: '18.2' } },
  plugins: ['react-refresh'],
  rules: {
    'react/jsx-no-target-blank': 'off',
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
    "no-unused-vars": false
  },
}

まずは関数のテストがjestで可能かをサンプルテストを作成して確認する

src/__tests__/sample.spec.jsを作成する

以下のテストを書く(trueがtrueであることを確かめるテスト)

describe("Sample Test", () => {
  it("should return true", () => {
    expect(true).toBe(true);
  });
});

次にnpm run testでテストが実行できるようにする

npm install --save-dev jest-environment-jsdom @babel/core @babel/preset-env

.babelrcというファイルを作る

{
  "presets": [
    "@babel/preset-env",
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ]
}

コマンドからテストを実行する

npm run test

**追記：package.jsonに下記を追加する**

"scripts": {
    "test": "jest",
  }

テストが実行されて成功したらOK

## コンポーネントのテストをする

実際にフロント側で正しく表示されているかをテストするのにreact-testing-libraryを利用する

テスト用にApp.jsxを変更する

import React from "react";
function App() {
  return (
    <>
      <h1 data-testid="title">Hello Jest</h1>
    </>
  );
}

export default App;

ここでh1が「Hello Jest」になっていることをテストしてreact-testing-libraryが正しく導入できていることを確認する

titleタグにdata-testidをつけた。これはテスト時だけに振られるIDであり、これを参照することでテストではh1を画面からdatat-testidを使って特定する

src/__tests__/componenteSample.spec.jsxを作成する

import App from "../App";
import React from "react";
import '@testing-library/jest-dom'
import { render, screen } from "@testing-library/react";

describe("Title Test", () => {
  it("タイトルがHello Jestであること", () => {
    // testId(title)を指定して取得
    render(<App />);
    const title = screen.getByTestId("title");
    expect(title).toHaveTextContent("Hello Jest");
  });
});

いかのようにすべてのテストが通ればOK


**追記：Jestのバージョン27からデフォルトのテスト環境に変化があったようです。エラーが出る場合は下記を参考に修正してください。**

「The error below may be caused by using the wrong test environment」が出た時の対応
https://qiita.com/ryosuketter/items/ff2c6085c06d9cd343d5

「Cannot find module '@testing-library/jest-dom/extend-expect' from 'src/tests/componenteSample.spec.js'」が出た時の対応
https://stackoverflow.com/questions/77328459/cannot-find-module-testing-library-jest-dom-extend-expect-from-jest-setup-js