大家好,我是 CUGGZ。
创新互联网站建设公司一直秉承“诚信做人,踏实做事”的原则,不欺瞒客户,是我们最起码的底线! 以服务为基础,以质量求生存,以技术求发展,成交一个客户多一个朋友!专注中小微企业官网定制,网站设计制作、成都网站制作,塑造企业网络形象打造互联网企业效应。
在前端测试中,框架可以把测试代码抽离出来,作为一个整体结构化地去设计测试用例,放到专门的测试文件中,也可以实现自动运行以及显示测试结果。下面就来看看常用的测试框架有哪些,它们都有哪些优缺点!
前端测试通常可以分为以下三种:
stateofjs 2022:前端测试框架受欢迎度排行榜
Jest 是由 Facebook 开发的 JavaScript 测试框架。它是测试 React 的首选,并且得到了 React 社区的支持和开发。
Jest 具有以下特点:
示例代码:
const sum = require(‘./sum’);
test('1 + 2 = 3’, () => {
expect(sum(1, 2)).toBe(3);
});
}
Github: https://github.com/facebook/jest
Mocha 是一个功能丰富的 JavaScript 测试框架,可以运行在 Node.js 和浏览器中,使异步测试变得简单有趣。Mocha 测试连续运行,允许灵活和准确的报告,同时将未捕获的异常映射到正确的测试用例。
Mocha 不支持开箱即用的断言、模拟等,需要通过组件/插件来添加这些功能。与 Mocha 搭配的最流行的断言库包括 Chai、Assert、Should.js 和 Better-assert。
Mocha 具有以下特点:
当然,Mocha 也是有缺点的:
示例代码:
var assert = require(‘assert’);
describe(‘Array’, function () {
describe(‘#indexOf()’, function () {
it(‘should return -1 when the value is not present’, function () {
assert.equal([1, 2, 3].indexOf(4), -1);
});
});
});
Github: https://github.com/mochajs/mocha
Cypress 是为现代 Web 构建的下一代前端测试工具。借助 Cypress,开发人员可以编写端到端测试、集成测试和单元测试。Cypress 完全可以在真正的浏览器(Chrome、Firefox 和 Edge)中运行,不需要驱动程序二进制文件。自动化代码和应用代码共享同一个平台,让开发人员可以完全控制被测应用。Cypress 以其端到端测试功能而闻名,这意味着可以遵循预定义的用户行为,并让该工具在每次部署新代码时报告潜在差异。
Cypress 具有以下特点:
不过,需要注意的是,Cypress 只能在单个浏览器中运行测试。
示例代码:
Cypress.Commands.add('login', (username, password) => {
cy.visit('/login')
cy.get('input[name=username]').type(username)
// {enter} causes the form to submit
cy.get('input[name=password]').type(`${password}{enter}`, { log: false })
// we should be redirected to /dashboard
cy.url().should('include', '/dashboard')
// our auth cookie should be present
cy.getCookie('your-session-cookie').should('exist')
// UI should reflect this user being logged in
cy.get('h1').should('contain', username)
})
it('does something on a secured page', function () {
const { username, password } = this.currentUser
cy.login(username, password)
// ...
})
Github: https://github.com/cypress-io/cypress
与其他 JavaScript 测试框架不同,Storybook 是一个 UI 测试工具,它为测试组件提供了一个隔离的环境。Storybook 还附带工具、Test runner 以及与更大的 JavaScript 生态系统的方便集成,以扩展 UI 测试覆盖范围。
可以通过多种方式使用 Storybook 进行 UI 测试:
Github: https://github.com/storybookjs/storybook
Jasmine 是一个简易的 JavaScript 单元测试框架,其不依赖于任何浏览器、DOM、或者是任何 JavaScript 而存在。它适用于所有网站、Node.js 项目,或者是任何能够在 JavaScript 上面运行的程序。Jasmine 以行为驱动开发 (BDD) 工具而闻名。BDD 涉及在编写实际代码之前编写测试(与测试驱动开发 (TDD)相反)。
Jasmine 具有以下特点:
当然,Jasmine 也是有有缺点的:
示例代码:
describe(“helloWorld”, () => {
it(“returns hello world”, () => {
var actual = helloWorld();
expect(actual).toBe(“hello world”);
});
}
)
Github: https://github.com/jasmine/jasmine
React Testing Library 基于 DOM Testing Library 的基础上添加一些 API,主要用于测试 React 组件。该库在使用过程并不关注组件的内部实现,而是更关注测试。该库基于 react-dom 和 react-dom/test-utils,是以上两者的轻量实现。
React Testing Library 不像 Jest 那样是一个 Test runner。事实上,它们可以协同工作。React Testing Library 是一组工具和功能,可帮助访问 DOM 并对其执行操作,即将组件渲染到虚拟 DOM 中,搜索并与之交互。
React Testing Library 具有以下特点:
示例代码:
示例代码:
import React, {useEffect} from ‘react’
import ReactDOM from ‘react-dom’
import {render, fireEvent} from ‘@testing-library/react’
const modalRoot = document.createElement(‘div’)
modalRoot.setAttribute(‘id’, ‘modal-root’)
document.body.appendChild(modalRoot)
const Modal = ({onClose, children}) => {
const el = document.createElement(‘div’)
useEffect(() {
modalRoot.appendChild(el)
return () modalRoot.removeChild(el)
})
return ReactDOM.createPortal(
,
e.stopPropagation()}>
{children}
el,
)
}
test(‘modal shows the children and a close button’, () => {
// Arrange
const handleClose = jest.fn()
// Act
const {getByText} = render(
,
test
)
// Assert
expect(getByText(‘test’)).toBeTruthy()
// Act
fireEvent.click(getByText(/close/i))
// Assert
expect(handleClose).toHaveBeenCalledTimes(1)
})
Github: https://github.com/testing-library/react-testing-library
Playwright 是一个用于端到端测试的自动化框架。该框架由 Microsoft 构建和维护,旨在跨主要浏览器引擎(Chromium、Webkit 和 Firefox)运行。它实际上是早期 Puppeteer 项目的一个分支。主要区别在于,Playwright 是专门为开发人员和测试人员进行 E2E 测试而编写的。Playwright 还可以与主要的 CI/CD 服务器一起使用,如 TravisCI、CircleCI、Jenkins、Appveyor、GitHub Actions 等。
Playwright 具有以下特点:
当然,Playwright 也有一些缺点:
示例代码:
import { test, expect } from '@playwright/test';
test('my test', async ({ page }) => {
await page.goto('https://playwright.dev/');
// Expect a title "to contain" a substring.
await expect(page).toHaveTitle(/Playwright/);
// Expect an attribute "to be strictly equal" to the value.
await expect(page.locator('text=Get Started').first()).toHaveAttribute('href', '/docs/intro');
await page.click('text=Get Started');
// Expect some text to be visible on the page.
await expect(page.locator('text=Introduction').first()).toBeVisible();
});
Github: https://github.com/microsoft/playwright
Vitest 是一个由 Vite 提供支持的极速单元测试框架。其和 Vite 的配置、转换器、解析器和插件保持一致、开箱即用的 TypeScript / JSX 支持、支持 Smart 和 instant watch 模式,如同用于测试的 HMR、内置 Tinyspy 用于模拟、打标和监察等。Vitest 非常关心性能,使用 Worker 线程尽可能并行运行,带来更好的开发者体验。
Vitest 具有以下特点:
不过,Vitest 仍处于早期阶段(最新版本为 0.28.1)。尽管 Vitest 背后的团队在创建此工具方面做了大量工作,但它还很年轻,社区支持可能还不是很完善。
示例代码:
test('Math.sqrt()', () => {
expect(Math.sqrt(4)).toBe(2)
expect(Math.sqrt(144)).toBe(12)
expect(Math.sqrt(2)).toBe(Math.SQRT2)
})
test('JSON', () => {
const input = {
foo: 'hello',
bar: 'world',
}
const output = JSON.stringify(input)
expect(output).eq('{"foo":"hello","bar":"world"}')
assert.deepEqual(JSON.parse(output), input, 'matches original')
})
Github: https://github.com/vitest-dev/vitest
AVA 是一个极简的 Test Runner,它利用 JavaScript 的异步特性并同时运行测试,从而提高性能。AVA 不会为创建任何 Globals,因此可以更轻松地控制使用的内容。这可以使测试更加清晰,确保确切知道发生了什么。
AVA 具有以下特点:
当然,AVA 也有一些缺点:
示例代码:
import test from 'ava';
test('foo', t => {
t.pass();
});
test('bar', async t => {
const bar = Promise.resolve('bar');
t.is(await bar, 'bar');
});
Github: https://github.com/avajs/ava
当前标题:前端测试技术方案总结,你学会了吗?
文章地址:http://www.36103.cn/qtweb/news10/34210.html
网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联