🐙前端测试工具介绍 |
您所在的位置：网站首页 › 前端自动化工具包括 › 🐙前端测试工具介绍 |
🐙前端测试工具介绍
|
墨菲定律告诉我们 - 任何可能出错的事情都会出错，但对于许多开发人员来说，测试前端代码仍然是一个令人困惑的实践。 随着前端项目复杂度的日益提升，以及组件化开发的普及，如何在快速迭代的需求中维持项目的稳定性成为了迫在眉睫的事情。 在现代前端开发中，页面都是由一个个模块/组件组成的，维持每个模块/组件的稳定是项目稳定性的基础。 前端测试可以简单分为单元测试(Unit-Test)与端到端测试(End-to-End) 什么是单元测试(Unit-Test)？ 单元测试是一种非常成熟的测试方法之一，她是所有测试的基础，其目的是确保您的单元代码按预期独立运行。 对于前端来说，单元代码通常来说是一个组件（html css js/ts），而对于无UI依赖（headless）的程序来说就是一个个 js/ts 文件。 测试工具一般由测试框架(Test Framework)，断言库(Assertion Library)，涉及 UI 还需要 JSDOM 等组成。 当下最流行的单元测试工具有： Jest / Mochavue-test-util / enzymetesting-libaraycypress测试框架Jest 是一个零配置的测试框架，并且内置了 JSDOM 运行环境、断言库等必要工具，并提供覆盖率(coverage)、快照对比(snapshots)、模拟函数(Mock Funtion) 等异常方便的功能。 Mocha 是一个灵活的测试框架，想要实现 Jest 的功能需要自行寻找第三方模块配置，例如 sinon、chai 等。 组件测试工具集vue-test-util / enzyme 根据其各自平台 (Vue/React) 提供了一套操作组件的工具集合，依赖测试框架。 // 测试 useClipboard 功能是否正确被调用 import { mount } from '@vue/test-utils' import Clipboard from './Clipboard.vue' import { useClipboard } from '../packages/index'; const wrapper = mount(Clipboard); // mock 掉实现细节 - document.execCommand document.execCommand = jest.fn().mockReturnValue(true); // 找到需要 copy 的元素 const copyTextRefEl = wrapper.findComponent({ ref: 'copyTextRefEl' }); const { copyText } = useClipboard(copyTextRefEl.element as any); // 执行 copyText(); // 检查 document.execCommand 是否调用时传入了参数('copy', false) expect(document.execCommand).toHaveBeenCalledWith('copy', false); 组件测试工具集(2)如果说 Jest / vue-test-util / enzyme 等依赖实现细节的测试方式为开膛破肚式，那么 testing-libaray 就可以比喻为温柔爱抚式。 testing-libaray 通过模拟用户交互作前提，不深入单元的实现细节，依靠单元的外在状态变化来测试，以便于在你重构组件时无需更改测试代码。 testing-libaray 是对 vue-test-util / enzyme 的上层抽象。 // Component.vue Times clicked: {{ count }} increment export default { data: () => ({ count: 0, }), methods: { increment() { this.count++ }, }, } // test.js import { render, fireEvent } from '@testing-library/vue' import Component from './Component.vue' test('increments value on click', async () => { const { getByText } = render(Component) getByText('Times clicked: 0') const button = getByText('increment') await fireEvent.click(button) await fireEvent.click(button) getByText('Times clicked: 2') })以下有几个简单的例子来加深上述概念的印象： Test-Case: 函数测试使用工具：Jest - Use Matchers 用例：测试函数输入输出 function sum(a, b) { return a + b } describe('测试函数输入输出', () => { expect(sum(1, 1)).toBe(2) // pass expect(sum(1,'1')).toBe(2) // fail }); Test-Case: 时间模拟使用工具：Jest - Timer Mocks / Mock Functions 用例：操控时间流逝 describe('操控时间流逝', () => { beforeAll(() => { // 将 setTimeout mock 掉 jest.useFakeTimers(); }); afterEach(() => { jest.clearAllTimers(); }); afterAll(() => { // 恢复真实的 setTimeout jest.useRealTimers(); }); it('模拟 callback 函数能否在 1s 后调用', () => { const callback = jest.fn(); const { onStart } = useTimeout(callback, 1000); onStart(); jest.advanceTimersByTime(1000); // 时间马上流逝 1s expect(callback).toHaveBeenCalledTimes(1); }); }); Test-Case: 快照测试使用工具：Jest - Snapshot Testing / vue-test-util - mount 用例：测试快照改动 import { mount } from "@vue/test-utils"; import App from "./../src/App.vue"; // 第一次快照测试时，会生成当前快照文件，用于对比更改 describe('测试快照改动', () => { const wrapper = mount(App) it('第一次快照测试', () => { expect(wrapper.element).toMatchSnapshot() // pass }) it('第二次快照测试，会拿之前的 Snapshot 文件做对比，若 fail，则需要 update 快照', () => { const button = wrapper.find("changeTextButton"); button.trigger("click"); expect(wrapper.element).toMatchSnapshot() // fail }) }); Test-Case: 弹窗测试使用工具：testing-libaray 用例：测试是否展示了弹窗文案 import { render, fireEvent, cleanup } from '@testing-library/vue'; import App from "./../src/App.vue"; // 第一次快照测试时，会生成当前快照文件，用于对比更改 describe('测试是否展示了弹窗文案', () => { afterEach(cleanup); it('不深入按钮细节，仅仅点击找到的第一个“打开弹窗”按钮', async () => { const { getByText } = render(App); const showModalButton = getByText('打开弹窗') await fireEvent.click(showModalButton) getByText('我是弹窗') // pass }) });总得来说：测试 UI 组件时使用 testing-libaray，测试实现细节时使用 jest + vue-test-util/enzyme 什么是端到端测试(e2e)？e2e一种测试方法，它用来测试一个应用从头到尾的流程是否和设计时候所想的一样。在前端测试的角度来看，e2e 测试代表用户端(User) to 客户端(Client)，以用户的行为测试客户端的设计是否正确。 前端 e2e 测试代表则为 CypressA test runner built for humans.Cypress 是在 Mocha API 的基础上开发的 all in one E2E 测试框架，并不依赖前端框架，也无需其他测试工具库，配置简单，并且提供了强大的 GUI 图形工具，可以自动截图录屏，实现时空旅行并在测试流程中 Debug 等等。 Cypress 的特性有： 时间旅行(Time travel)：Cypress 会将每一步的测试都生成快照，易于 Debug。调试方便(Debuggability)：不用再猜测你的用例为什么会失败，Cypress 调试工具类似于 Chrome DevTools，快速追踪错误。实时重载(Real time reloads)：当改动测试用例时，会自动重载无需等待(Automatic waiting)：无需添加任何 waits or sleeps 代码，Cypress 会帮你处理好时间流逝。模拟函数(Spies, stubs, and clocks)：就像你喜爱的 jest.useFakeTimers、jest.fn、jest.mock 一样。网络控制(Network traffic control)：强大的控制网络状态能力。自动截图录屏(Screenshots and videos)：失败时会自动截图/录屏，方便进行查看问题可靠的报告(Consistent results)：快速，可靠，一致的测试结果详细的测试步骤 / 真实浏览器测试  Spec 文件管理 / 浏览器切换  总的来说：你可以只用 Cypress 这款测试框架来测试代码，若然你感觉到语法别扭，还有非常丰富的插件供你使用。 强大的插件机制 cypress-jest-adapter cypress-vue-unit-test cypress-react-unit-test cypress-testing-library |
【本文地址】
今日新闻 |
推荐新闻 |