React Testing Series - Basics and Setup

文章前言

最近在YT上跟一系列的React testing的相關課程，收穫很多，利用這篇文章以及下篇文章來分享這個testing series所學習到的部分東西。

這兩篇文章主要是使用Jest來當作test framework以及test runner

本篇內容

本篇內容主要會講述測試前的前置設定以及簡易的Function testing以及React Component testing

正文開始

Step1. 建立Typescript react project

這邊使用next.js這個react框架來幫助我們建立react project

npx create-next-app <name> --ts

Step2. ts-jest setup

因為我們使用Typescript來進行開發，所以在進行測試前必須先做以下的動作

ts-jest 是一個可以讓你用在typescript test file中使用jest的一個框架

npx ts-jest config:init

執行以下指令後會產生一個 jest.config.js 檔案，可以拿來對jest做設置。

藉由以上的設置即可對一個function做一個基本的測試

1. 宣告一個ts file，並且export出一個function
2. 搭配一個test file，對該function做測試

Step 3. React Component測試前之設定

想要對React的Component做測試的話，只使用Jest使不夠的，我們想對React Component做的測試是像在以下的程序

1. 在畫面上渲染該Component
2. 在畫面上點擊某個按鈕之後
3. 畫面上渲染某些文字

此時我們需要的是React Testing Library這個測試框架

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

以上我們總共下載了四個在testing-library底下的套件

1. react - 提供了render方法能讓我們在test file中選染react元件
2. dom - 測試DOM node的函式庫
3. jest-dom - 提供了一些在DOM的declaration method例如toBeInDocument()
4. user-event - 可以在test file中觸發事件如click, hover

jest setup

下載完這四個套件後必須在 jest.config.js 中對一些屬性做設定

• setupFilesAfterEnv

創立一個 jest.setup.js 並在 jest.config.js 中宣告至 setupFilesAfterEnv 這個屬性中，在 jest.setup.js 中的內容會在每個 test suite 前跑過一次

// jest.setup.js
// this file will be executed before any test suite.
import '@testing-library/jest-dom'

• preset

填上 ts-jest

• testEnvironment

因為我們想要在browser端進行測試而非server-side，所以此屬性需要設置為 js-dom

globals

在測試環境中所需要的全域變數，因為使用typescript的關係需要指向一個 tsconfig.json檔案

• tsconfig.json

由於我們不想要更動的原本的 tsconfig.json之設定，可以利用extends這個語法撰寫一個客製化給測試環境使用的tsconfig.json

在 jsx 這個屬性中，在react17 以前可以設置成react，在react17後可以設置成react-jsx

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
  "jsx": "react-jsx"
  }
}

經由上述的設定最後的 jest.config.js 會長成以下這樣

module.exports = {
  preset: "ts-jest",
  testEnvironment: "jsdom",
  // the tsconfig file path which applys to jest
  globals: {
    "ts-jest": {
      tsconfig: "tsconfig.jest.json",
    },
  },
  // preset up, inject jest-dom testing framework.
  setupFilesAfterEnv: ['./src/jest.setup.ts'],
};

Step4. 開始執行React Component測試

上述都設定完成後即可對一個React Component做測試，在這先創立一個 Hello.tsx 以及 Hello.spec.tsx

1. 創建一個簡單的React Component，單純的渲染Hello world字串在螢幕上

// Hello.tsx
import React from "react";
export default function Hello() {
  return <div>Hello world</div>;
}

2. 對該Hello Component做測試，以下為步驟

• 利用render來渲染該Component
• exepect在螢幕上獲取含有Hello world字串之HTML element

// Hello.spec.tsx
import { render, screen } from "@testing-library/react";
import Hello from "./Hello";
import React from "react";
it("renders Hello world", () => {
  // 1. renders the Hello Component
  render(<Hello />);
  // 2. expect an HTML element which contains the text "Hello world"     will appear on the screen
  const myElement = screen.getByText(/Hello world/);
  expect(myElement).toBeInTheDocument();
});

結論

以上講述了一些設定以及簡單的測試，但此作者出的一系列的React測試影片講的不單單是上述那麼簡單，在設定方面也有講述到如何設定eslint, lint-staged以及git hooks, github actions來保固程式碼的品質，後面的幾個章節也有講述到非同步測試以及Mocking，我看完的收穫非常的大，會把影片的連結放在下面，有空可以自己去看看。

如果對測試不陌生的讀者們一定知道測試分成單元測試，整合測試以及e2e測試，在前端的測試中，最主要需要抓住的觀念也是該影片作者強調的是寫一個讓你覺得有價值並且有安全保證的測試。

實際上並不用硬是去區分該測試是屬於哪一種類型的測試，前端的測試主要是針對各種user-flow進行測試，只要能確保這些user-flow是正確以及安全的那麼該測試就是一個有用的測試。

之後如果有空會在把這個Testing Series的內容補齊。

Ref

React Testing Series from Bruno Antunes

https://www.youtube.com/watch?v=7uKVFD_VMT8&list=PLYSZyzpwBEWTBdbfStjqJSGaulqcHoNkT&index=2