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。

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页