React

代替人工进行功能测试

单元测试

代码示例：

// src/App.jsx

import React from "react";
import {createRoot} from "react-dom/client";
import App from "./unit_testing/App";

createRoot(document.getElementById('root')).render(<App/>)

// src/unit_testing/App.jsx

import React, {useState} from "react";

export default function App() {
    const [list, setList] = useState(['aaa', 'bbb', 'ccc'])
    const [text, setText] = useState('')

    return (
        <div>
            <h1>ToDoList</h1>
            <input type="text" onChange={evt => {
                setText(evt.target.value)
            }}/>
            <button className={'add'} onClick={() => {
                setList([...list, text])
            }}>add
            </button>
            <ul>
                {
                    list.map((item, index) => <li key={item}>
                        {item}
                        <button className={'del'} onClick={() => {
                            let newList = [...list]
                            newList.splice(index, 1)
                            setList(newList)
                        }}>del
                        </button>
                    </li>)
                }
            </ul>
        </div>
    )
}

// src/unit_testing/test/App-test.test.js

import ShallowRender from 'react-test-renderer/shallow'  // 浅渲染（速度快，但不会测试子组件，仅测试一层）
import App from '../App'
// import ReactTestUtil from 'react-dom/test-utils'  // 模拟点击

describe('App-test', () => {
    it('h1标签', () => {
        const render = new ShallowRender()
        render.render(<App/>)
        // console.log(render.getRenderOutput().props.children[0].type)  // 根据终端提示
        expect(render.getRenderOutput().props.children[0].type).toBe('h1')  // 期望（断言）指定的测试的结果为h1标签
        expect(render.getRenderOutput().props.children[0].props.children).toBe('ToDoList')
    })
    // it('删除功能', () => {
    //     const app = ReactTestUtil.renderIntoDocument(<App/>)  // 渲染成真实DOM来模拟点击
    //     let todoitems = ReactTestUtil.scryRenderedDOMComponentsWithTag(app, 'li')
    //     let detelteButton = todoitems[0].querySelector('button')
    //     ReactTestUtil.Simulate.click(detelteButton)  // 点击删除按钮
    //     let todoitemsAfterClick = ReactTestUtil.scryRenderedDOMComponentsWithTag(app, 'li')
    //     expect(todoitems.length - 1).toBe(todoitemsAfterClick.length)  // 前后比对
    // })
    // it('添加功能', () => {
    //     const utils = ReactTestUtil.renderIntoDocument(<App/>)
    //     let view = ReactTestUtil.scryRenderedDOMComponentsWithTag(utils, 'li')
    //     let addInput = ReactTestUtil.scryRenderedDOMComponentsWithTag(utils, 'input')
    //     addInput.value = 'HQSY'  // 输入指定值
    //     let addButton = ReactTestUtil.findRenderedDOMComponentWithClass(app, 'add')
    //     ReactTestUtil.Simulate.click(addButton)  // 点击添加按钮
    //     let todoitemsAfterClick = ReactTestUtil.scryRenderedDOMComponentsWithTag(app, 'li')
    //     expect(todoitemsAfterClick.length).toBe(todoitems.length + 1)  // 前后比对
    // })
})

第三方

代码示例：

// src/unit_testing/test/App-enzyme.test.js

import App from "../App";
import Enzyme, {shallow, mount} from 'enzyme'  // 需要适配器的支持
import adapater from '@wojtekmaj/enzyme-adapter-react-17'

Enzyme.configure({adapater: new adpater()})  // 适配器是必须的，否则报错

describe('App-test', () => {
    it('h1标签', () => {
        let app = shallow(<App/>)  // 渲染成虚拟DOM且是浅层次的渲染
        expect(app.find('h1').text()).toEqual('ToDoList')
    })
    it('删除功能', () => {
        let app = mount(<App/>)  // 渲染成真实DOM
        let todolength = app.find('li').length
        app.find('button.del').at(0).simulate('click')  // del对应类名，第一个位置模拟点击
        expect(app.find('li').length).toEqual(todolength - 1)
    })
    it('添加功能', () => {
        let app = mount(<App/>)
        let todolength = app.find('li').length
        let addInput = app.find('input')
        addInput.value = 'HQSY'
        app.find('add').simulate('click')
        expect(app.find('li').length).toEqual(todolength + 1)
    })
})