使用 Jest + Testing Library 完成 React 的单元测试

说明

不同于普通JS测试，组件的测试会更关注 DOM 渲染，以及组件功能正确性，而不是组件内部某些方法调用等的测试

Testing Library 包含 DOM 及 UI 组件测试的一系列工具, 支持 React Vue Angular 等多个框架

组件测试目标

编写可维护的测试，并通过测试可以确保组件在正确工作
同时希望测试避免包含实现细节，以便组件重构时，不会破坏测试用例或者减慢开发速度
针对 React 组件来说，应避免测试 state、声明周期、组件方法等
Testing Library 测试的时渲染后 dom 而不是未渲染前 React Dom

相关

入手前端单元测试(一) – Jest 基本使用
入手前端单元测试(二) – 匹配器、Mock、配置文件
Jest + Testing Library 完成 React 单元测试
React 官网测试概览
Testing Library

Testing Library 简单使用

测试 React 组件需要使用的技术

@testing-library/dom: 一个轻量级的(DOM 查询、交互)测试解决方案,它使用了一种与 ”用户的在页面中查找元素" 类似的DOM 查询方式，以保证准确性
@testing-library/user-event: 提供了更加高级的浏览器交互模拟 – 即事件
@testing-library/react: 在 @testing-library/dom 基础上，将 React 组件渲染为 DOM 便于后边测试
@testing-library/jest-dom 追加一系列辅助测试 DOM 的 matchers 匹配器，需要在每个 react test 文件的顶部引用，否则类似 expect(dom).toBeInTheDocument() 这样的断言则没法用

由于 react 组件使用jsx 编写，所以要在基础的 babel 配置中加上对 react 的支持，否则 jest 会不认识 react 组件代码

// babel.config.js
module.exports = {presets: [['@babel/preset-env', {targets: {node: 'current'}}],'@babel/preset-react', // 追加'@babel/preset-typescript',],
};

查询语句说明：查询语句分为三大类：getBy…\queryBy…\findBy…

getBy… 查找匹配的节点，如果没找到或者找到了多个，则会抛出错误
queryBy… 同样是查找匹配的节点，没找到的话不会抛出错误，通常用于断言不存在的元素（找到多个还是会抛出错误）
findBy… 也是查找匹配的节点，但是可以支持查找异步元素，会返回 promise
如果预计的匹配项会有多个则可以使用以上三个API的变种 getAllBy…\queryAllBy…\findAllBy…
更多细节查看

查询项说明

getByRole(tagName, {name: '通过 name 过滤'}) 这里的 role 指的是浏览器 ARIA 无障碍机制中的属性（可用的 role），name 指的则是 aria-label 属性的值
getByText(string) 通过文本内容来查找元素，但是尽量不要用在 div span p 等元素的查找上
getByAltText(string) 通过 alt 属性查找 img area input 等元素
getByPlaceholderText(string) 通过 placeholder 查询元素
getByTestId(string) 通过给元素设置 data-testid 然后可以借助这个查询获得这个元素
container.querySelector('') 借助 render 后返回的 container 使用 DOM 的方式查询元素
查询语句的第一个参数可以写作正则表达式，用来模糊匹配
更多查询项查看

使用 @testing-library/jest-dom 后增加的 matchers 查看

借助 @testing-library/user-event 实现的事件查看

一个测试案例

import '@testing-library/jest-dom';
import {render, cleanup, } from '@testing-library/react';
import userEvent from "@testing-library/user-event";
import React from 'react';
import Button from "../Button";/*** 在每个测试用例完成后执行 react ummount 卸载程序* 在 jest 中这个行为会默认加上，不需要我们手动加上* */
// afterEach(cleanup);describe('测试 React 组件', () => {test('测试组件渲染', () => {/*** 使用 render 将组件渲染到 dom 上，* 其返回值，包含 DOM Testing Library 中的 queries 查询方法* */const result = render(<Button appearance="primary" >TEXT</Button>);/*** debug() 用来查看渲染出的 dom 是什么样的结构 (html), 主要用来辅助测试* 执行 test 可以在控制台看到, 其渲染出的时普通的 html ，复杂的 react 状态等并没有展示* 由此可见，RTL 不关心组件的编写方式，它只关心最后生成的 DOM 树是否符合要求*/result.debug();/*** 通过无障碍属性 role='button' 来查找元素，name 则表示 aria-label 属性* */expect(result.getByRole('button')).toBeInTheDocument();/*** 通过文本内容来查找元素，但是尽量不要用在 div span p 等元素的查找上* */expect(result.getByText('TEXT')).toBeInTheDocument();/*** 第一个参数也可以写作 正则，用来匹配* */expect(result.getByText(/^TEX/)).toBeInTheDocument();/*** 可以使用其他的 matchers https://github.com/testing-library/jest-dom#custom-matchers* */expect(result.getByText(/^TEX/)).toHaveClass('yufu-btn-primary');const input = render(<input type="text" alt="testAlt" placeholder="testPlaceholder" data-testid="TTTT" />)/*** 通过 alt 属性查找 img area input 等元素* */expect(input.getByAltText('testAlt')).toBeInTheDocument();/***  通过 placeholder 查询元素* */expect(input.getByPlaceholderText('testPlaceholder')).toBeInTheDocument();/*** queryBy... 用来断言不存在的"预期"* */expect(input.queryByPlaceholderText('test')).not.toBeInTheDocument();/*** 通过 testid 查询元素* */expect(input.getByTestId('TTTT')).toBeInTheDocument();/*** 借助 container 使用DOM 查询元素* */expect(input.container.querySelector('input[type="text"]')).toBeInTheDocument();/*** 借助 @testing-library/user-event 来测试事件* */userEvent.type(input.getByTestId('TTTT'), 'something'); // 触发事件expect(input.getByTestId('TTTT')).toHaveValue('something'); // 验证事件结果})
})

使用 Jest + Testing Library 完成 React 的单元测试相关推荐

Jest + React Testing Library 单测总结
大家好,我是若川.持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan02 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
使用 Jest 和 Enzyme 测试 React 组件
type: FrontEnd title: Testing React components with Jest and Enzyme link: hackernoon.com/testing-rea ...
JavaScript 测试系列实战（一）：使用 Jest 和 Enzyme 测试 React 组件
你或许早已经知道"单元测试""端到端测试"这些名词,但从未真正付诸实践.在这一系列实战教程中,我们将手把手带你掌握 Jest.Enzyme.Cypress 等测 ...
react jest测试_如何使用React测试库和Jest开始测试React应用
react jest测试 Testing is often seen as a tedious process. It's extra code you have to write, and in s ...
react测试组件_测试驱动的开发，功能和React组件
react测试组件 This article is part of my studies on how to build sustainable and consistent software. In ...
[React] 测试模块enzyme
前言: 本文参照官方文档进行逐步个人看法和分析 github: GitHub - enzymejs/enzyme: JavaScript Testing utilities for React 在单元 ...
一文，教你搭建前端自动化测试环境
前言最近在看前端自动化测试相关的东西,在搭建环境的时候发现还是有许多需要注意的地方,而且网上很少有将各种测试(单元测试,集成测试,端对端测试)的环境搭建都提及的文章,对像我这样的新手不太友好,于是便 ...
Jest enzyme 进行react单元测试
下面的文章会默认读者了解 React及其技术栈以及基本的前端单元测试,由于本文涉及到的技术较多,故不宜一一在文中介绍,谅解. 写在前面在撰写单元测试用例之前,我们需要了解到撰写测试用例的原因.写测试 ...
react jest测试_如何设置Jest和Enzyme来测试React Native应用
react jest测试 by Sam Ollason 通过萨姆·奥拉森(Sam Ollason) This short article shares my experiences setting u ...

使用 Jest + Testing Library 完成 React 的单元测试

说明

Testing Library 简单使用

使用 Jest + Testing Library 完成 React 的单元测试相关推荐

最新文章

热门文章