软件测试中,Unit Testing 是最基础的,也是测试量最大的。
那么,React 项目如何 Unit Testing呢?
首先,我们要先确定几个前提
npx create-react-app testing-demo
cd testing-demo
yarn add @testing-library/react --dev
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()
})
没有强制约定,个人认为测试代码和源码放在项目文件夹更容易管理。
如上面例子:测试代码和源码都存放在 src/components/counter/
中。
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: