通过写测试用例的方式学习前端知识

本文主要内容转录自 sorrycc 在 BiliBIli 上的一个分享——通过写测试用例学习前端知识，为了方便文字阅读，一些表达方式做了调整，此外，原视频中使用的 react-testing-library 已经升级为 @testing-library/react。对应的代码已经发布到 GitHub 上 https://github.com/xinpingwang/learning-by-test-case

作为一个前端开发者，我们经常需要学习一些新的类库或者框架，在阅读相关文档的时候，通常会有一些示例代码需要我们在一个环境中运行一下，以一方面是为了验证的运行结果，另一方面也可以加深印象和理解。可能每个人一套自己的验证方式，有的人可能会去写一个网页或者利用相关脚手架工具等创建一个具体的工程；我的办法是写测试用例，通过用例的方式去验证这些代码，看看它是不是真正能跑起来。下面我们分别用 React Hooks 和 Dva 来看一下具体是怎么做的，

React Hooks 测试用例

首先，我们需要创建一个空的工程：

mkdir learning-by-test-casecd learning-by-test-caseyarn init -y 

因为，我们是去跑 React Hooks 的代码，所以，我们需要安装 react 和 react-dom，以及一个 React 组件测试库，我个人倾向于使用 react-testing-library，还有就是 umi-test (基于 jest 的一个封装），当然大家也可以直接使用 jest，这可能需要做一些额外的配置。

react-testing-library 在 8.0 之后将包名改成了 @testing-library/react。

yarn add react react-dom @testing-library/react umi-test

为了方便运行测试用例，我们还在 package.json 中添加一个 script：

{  "name": "learning-by-test-case",  "version": "1.0.0",  "main": "index.js",  "license": "MIT",  "scripts": {    "test": "umi-test"  },  "dependencies": {    "@testing-library/react": "^12.1.2",    "react": "^17.0.2",    "react-dom": "^17.0.2",    "umi-test": "^1.9.6"  }}

下面我们终于可以开始写代码了，比如说 useState 这个 Hook，我们创建一个对应的测试文件 use-state.test.js

test("useState should word", () => {});

首先，把 useState 引入进来：

import {useState} from ‘react’

接着我们定义一个简单的组件，这个组件包含两个部分：一个 p 标签用于显示数据，另一是 button 点击这个 Button 后可以触发状态更新：

function Foo() {  const [count, setCount] = useState(0);
  return (    <>      <p data-testid=“count”>{count}</p>      <button onClick={() => { setCount(count + 1) }}>click me</button>    </>  );}

下面我们用 @testing-library/react 这个测试库来验证一下。我们会用到这个库提供的两个方法，首先是 render，它可以将我们定义的组件渲染出来，并返回一些方法获取 DOM 中的元素；另外一个是 fireEvent 进行点击事件模拟。

const { getByText, getByTestId } = render(<Foo />);expect(getByTestId("count").innerHTML).toEqual("0");fireEvent.click(getByText("click me"));expect(getByTestId("count").innerHTML).toEqual("1");

最后，我们用 umi-test 来执行一下测试用例

yarn test # 或者使用 yarn test --watch 以开启监听模式，这样我们修改测试代码以后，用例会自动执行

上面是一个非常简单的例子，大家可以自己去尝试测一下 useEffect 等等这些其他的 Hooks。

Dva 测试用例

首先，我们安装一下 dva 这个依赖：

yarn add dva

接着创建一个对应的测试文件 dva.test.js，并把 dva 引入进来：

import dva from "dva";
test("dva should word", () => {});

然后，我们需要创建一个 dva 应用：

const app = dva();
app.model({  namespace: "count",  state: 0,  reducers: {    add(state) {      return state + 1;    }  }});
app.router(() => <div />);app.start();

app.start() 之后我们就可以去验证一下 model 里面的 count 是不是 0：

expect(app._store.getState().count).toEqual(0);

如果写成 1 的话他就会报错，对他会报错说，期望值是 1 ，但实际上收到的值是 0。然后我们触发一个 action，之后它的值应该变成 1。

app._store.dispatch({ type: "count/add" });expect(app._store.getState().count).toEqual(1);

利用类似的方式，我们可以去测各种组件库。

小结

通过用例的方式，我们可以抛开界面，很快的拿到一个反馈，另外，我觉得这些用例也是一个代码积累，比如说我要去学一个类库，我就可以把这个库相关的一些方法通过用例的方式组织起来，那我之后用到这些方法的时候，就可以从自己的用例库中去找到一些之前积累过的代码片段。所以，通过用例可能会比我们写界面更加高效一点，也会有更好多的质量。