@react/testing-library学习：快速上手
把 react 渲染出来的 dom 拿来做各种测试
介绍
The core library, DOM Testing Library, is a light-weight solution for testing web pages by querying and interacting with DOM nodes (whether simulated with JSDOM/Jest or in the browser).
核心库domtestinglibrary是一个轻量级的解决方案，用于通过查询DOM节点并与之交互（无论是用JSDOM/Jest模拟还是在浏览器中模拟）来测试web页面。
React Testing Library 基于DOM Testing Library的基础上添加一些API，主要用于测试React组件。如果是其它的技术栈，可以选择对应的Testing Library库。该库在使用过程并不关注组件的内部实现，而是更关注测试。该库基于 react-dom 和 react-dom/test-utils ，是以上两者的轻量实现。
安装
npm install --save-dev @testing-library/react基本能力
- 组件渲染(render)
- 元素查找(get/query/find)
- 事件触发(fireEvent)
使用
render: render(component)
fireEvent：触发事件
示例
//search.test.js
import React from 'react'
//引入@testing-library/react提供的方法
import {render, fireEvent, screen} from '@testing-library/react'
import search from './search'
describe('Search', () => {
test('calls the onChange callback handler', () => {
const onChange = jest.fn();
// Arrange 编排
render(
<Search value="" onChange={onChange}>
Search:
</Search>
);
//Act 执行
fireEvent.change(screen.getByRole('textbox'), {
target: { value: 'JavaScript' },
});
//Assert 断言
expect(onChange).toHaveBeenCalledTimes(1);
});
});