2019-11-18 React Testing 1 - Unit Testing

软件测试中，Unit Testing 是最基础的，也是测试量最大的。

那么，React 项目如何 Unit Testing呢？

首先，我们要先确定几个前提

使用 create-react-app 创建项目
使用 Jest 和 React Testing Library 测试
使用 GitHub Actions 自动化

1. 创建项目，并配置 Jest 和 React Testing Library

npx create-react-app testing-demo

cd testing-demo
yarn add @testing-library/react --dev

2. 编写一个 Counter 组件，并测试

Tips: 测试代码和组件放在同一文件夹下，更易管理。

// src/components/counter/index.js
import React, { useState } from "react"

export default function Counter() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <button type="button" onClick={() => setCount(count - 1)}>
        -
      </button>
      <span>{count}</span>
      <button type="button" onClick={() => setCount(count + 1)}>
        +
      </button>
    </div>
  )
}

// src/components/counter/counter.test.js
import React from "react"
import { render, fireEvent } from "@testing-library/react"
import Counter from "."

test("<Counter />", () => {
  const { getByText } = render(<Counter />)

  expect(getByText("0")).toBeTruthy()

  fireEvent.click(getByText("+"))

  expect(getByText("1")).toBeTruthy()

  fireEvent.click(getByText("-"))
  fireEvent.click(getByText("-"))

  expect(getByText("-1")).toBeTruthy()
})

3. 常见问题

我应该在哪写 Unit Testing？

没有强制约定，个人认为测试代码和源码放在项目文件夹更容易管理。

如上面例子：测试代码和源码都存放在 src/components/counter/ 中。

自动补全 Jest 函数和断言的？

yarn add @types/jest

如何查看测试覆盖率？

yarn test --coverage

如何自动化测试？

以 GitHub Actions 为例：新建 .github/workflows/pull_request.yml，并编写如下代码

  name: "PR Checks"

  on: pull_request

  jobs:
  test:
    name: Unit Tests
    runs-on: ubuntu-latest
    steps:
      - name: Check out code
        uses: actions/checkout@master

      - name: Install dependencies
        run: yarn install --non-interactive --no-progress --frozen-lockfile --ignore-optional

      - name: Run tests
        run: yarn test
        env:
          CI: true

代码：https://github.com/ThaddeusJiang/react-testing-example/pull/1

refs: