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

viteでプロジェクトを作ってサーバーを立ち上げられるところまで準備する

jestをインストールする
TypeScriptなのでTypeも一緒に入れる
ts-jestはtsをjsに変換するために利用

$ npm i --save-dev　jest
$ npm i --save-dev @types/jest
$ npm i --save-dev ts-jest

jest.config.jsを作る

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

jest.setup.tsを作る(拡張子がjsではない)

import "@testing-library/jest-dom";
import { config } from "dotenv";

config();

$ npm install dotenv

tsconfig.jsonを変更する。

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "types": ["node", "jest", "@testing-library/jest-dom"]
  },
  "include": ["src"],
}

react-testing-libraryの導入

$ npm i --save-dev @testing-library/react
$ npm i --save-dev @testing-library/jest-dom 
$ npm i --save-dev jest-environment-jsdom 
$ npm i --save-dev @testing-library/user-event

package.jsonにtestを追加する

    "test": "jest"

src/__tests__を作成する
src/__tests__/AppComponent.spec.tsxを作成する

App.tsxをいかに修正

function App() {
  return (
    <>
      <h1>Hello World</h1>
    </>
  );
}

export default App;

タイトルがHelloWorldであることをテストする
AppComponent.spec.tsxをかく

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

describe("title", () => {
  it("should render title", () => {
    render(<App />);
    expect(screen.getByText("Hello World")).toBeInTheDocument();
  });
});

jest.setup.tsでdotenvを利用するのでインストール

$ npm i dotenv

テストを実行して通れば成功

$ npm run test