前端自动化测试 | 青训营笔记

沃德斌
81 阅读2分钟

今天是我参与「第五届青训营 」伴学笔记创作活动的第 16 天.

什么是自动化测试

image.png

  • QA团队对整个系统进行端对端测试

  • 在不同模块集成以后，QA团队对其正常通信和功能进行多维度测试

  • 开发人员通过编码的方式对自己的代码进行正确性校验

为什么要做自动化测试

  1. 统一代码风格
  2. 组件Readme用例化,保持时效性
  3. 有效审视代码中的耦合逻辑
  4. 避免后续迭代影响到历史功能，发布breaking change

前端自动化测试的技术选型

image.png

Typescript

 // ./App.test.tsx
import { mount } from "enzyme" ; import App from "./App";
 describe("test",  =>{
it( "first unit test",()=>{
const app = mount(<App l/>);
expect(app.find(".read-the-docs " ).getDOMINode( ).textContent).toEqual("click on the vite and React logos to learn more"
);
});
 });

import React from "react" ;
import { render， screen } from "@testing-library/react";
import { DomQuery } from "../ components/DomQuery";
describe("tests for 《4 | DOA查询(上):页面元素的渲染和行为查询》&《5 │DOM查询(下);test( "default role", o) ->{
render(<App />);
const button = screen.getByRole("button" );screen.debug(button);
});
});
  • Jest + React testing library + Cypress + storybook:
  • 测试框架:Jest(提供一个可运行的环境、测试结构、结果报告、代码覆盖、断言、mocking . snapshot)
  • 测试辅助库: react-testing-library (dom查询，断言和事件的模拟,React18推荐的Ul自动化的集大成测试辅助库)
  • Cypress + storybook: E2E端对端测试，覆盖单元测试不易于覆盖的复杂场景

如何进行前端自动化测试

查询

  • Get:返回查询的匹配节点，如果没元素匹配，则会报错(针对单查如果查到多个也会报错);

  • Query:返回查询的匹配节点，如果没有元素匹配会返回null，但是不会报错(同样针对单查,如果查到多个匹配元素也会报错)

  • Find:返回一个 Promise，默认超时时间为1000 ms，如果没有元素匹配或者查找超时, Promise 状态切为reject(同样针对单查,如果查到多个元素，也会返回reject)。

事件模拟

  • 针对这种场景,React Testing Library 提供了两种手段来模拟, fireEvent和userEvent

  • 我们更推荐使用userEvent,相比fireEvent,

  • userEvent 更贴切真实场景地模拟了事件,而fireEvent只是调度对应的事件。 我们书写的用例应该尽可能从用户视角来展开，而不是代码层面，这样对于用例本身来说，才是更强健的

avatar
文章
阅读
粉丝