react测试（1）Test Utilities

由于我是用的是脚手架创建的react项目，所以测试所需要的库都是安装好的，如果非脚手架创建还需要安装相应的库

组件

我们用一个很简单的组件来举例，点击Reset按钮，count被设置为初始值，点击加号按钮或者减号按钮，count对应加一减一

import React from "react"export default function MyCounter({initialCount}) {const [count, setCount] = React.useState(initialCount);return (<><span>Count:{count}</span><button onClick={() => setCount(initialCount)}>Reset</button><button onClick={() => setCount(prevCount => prevCount - 1)}>-</button><button onClick={() => setCount(prevCount => prevCount + 1)}>+</button></>);
}

测试

import React from "react";
import ReactDom from "react-dom";
import {act} from "react-dom/test-utils";  //渲染操作需要放到act里
import { render } from '@testing-library/react';  //render用于在测试代码中渲染组件
import Counter from "./Counter"let container = null;//每项测试开始前在document中插入我们的测试根节点
beforeEach(() => {container = document.createElement('div');document.body.appendChild(container);
});//每项测试结束将测试根节点清除
afterEach(() => {// 退出时进行清理container.remove();container = null;
});test("测试Counter", () => {//使用ReactDom将组件渲染到测试根节点act(() => {c.render(<Counter initialCount={0}/>, container);});//使用querySelectorAll和querySelector找到我们需要操作，或者检视是否正确的节点let buttons = container.querySelectorAll('button');let  label = container.querySelector('span');//一开始label 的值为 "Count:0"，这里的断言用的jest的断言，jest后续介绍expect(label.textContent).toBe("Count:0");//触发加号按钮的事件，我们上面用的是querySelectorAll查询的按钮，所以加号按钮是第三个，注意触发事件应该放到act中act(() => {buttons[2].dispatchEvent(new MouseEvent('click', {bubbles: true}));});//此时期望的label 的值为 "Count:1"expect(label.textContent).toBe("Count:1");//触发重置按钮act(() => {buttons[0].dispatchEvent(new MouseEvent('click', {bubbles: true}));});//此时期望的label 的值为 "Count:0"expect(label.textContent).toBe("Count:0");//触发减号按钮act(() => {buttons[1].dispatchEvent(new MouseEvent('click', {bubbles: true}));});//此时期望的label 的值为 "Count:-1"expect(label.textContent).toBe("Count:-1");
});

在上述代码中 我们就简单的完成了一个组件的测试，但是也可以看到我们用dispatchEvent触发事件，写的非常的麻烦，还要指定很多的参数，很是不方便，之后再介绍给简洁的测试方法。不过Test Utilities却是一个很好用的测试工具，它可以搭配我们所选的许多的测试框架一起进行测试。比如react便推荐结合jest进行react的测试，jest是一个非常好用的测试框架，它可以测试包括react，vue在内的很多主流前端框架和原生的js。