大家好，我是 CUGGZ。

在前端測試中，框架可以把測試代碼抽離出來，作為一個(gè)整體結(jié)構(gòu)化地去設(shè)計(jì)測試用例，放到專門的測試文件中，也可以實(shí)現(xiàn)自動(dòng)運(yùn)行以及顯示測試結(jié)果。下面就來看看常用的測試框架有哪些，它們都有哪些優(yōu)缺點(diǎn)！

前端測試通?？梢苑譃橐韵氯N：

• ?單元測試：將代碼的各個(gè)部分分開，對軟件中的最小可測試單元進(jìn)行檢查和驗(yàn)證；
• 集成測試：測試多個(gè)單元能否協(xié)調(diào)工作；
• 端到端測試（E2E）：從頭到尾測試整個(gè)軟件產(chǎn)品，以確保應(yīng)用程序流按預(yù)期運(yùn)行。

stateofjs 2022：前端測試框架受歡迎度排行榜

Jest

Jest 是由 Facebook 開發(fā)的 JavaScript 測試框架。它是測試 React 的首選，并且得到了 React 社區(qū)的支持和開發(fā)。

Jest 具有以下特點(diǎn)：

• 兼容性：除了可以測試 React 應(yīng)用，還可以輕松集成到其他應(yīng)用中，與 Angular、Node、Vue 和其他基于babel的項(xiàng)目兼容。
• 自動(dòng)模擬：當(dāng)在測試文件中導(dǎo)入庫時(shí)，Jest 會(huì)自動(dòng)模擬這些庫以幫助我們輕松地使用它們。
• 擴(kuò)展 API：Jest 提供了廣泛的 API，除非確實(shí)需要，否則不需要包含額外的庫。
• 計(jì)時(shí)器模擬：Jest 具有時(shí)間模擬系統(tǒng)，非常適合應(yīng)用中的快進(jìn)超時(shí)，并有助于在運(yùn)行測試時(shí)節(jié)省時(shí)間。
• 活躍社區(qū)：Jest 擁有很活躍的社區(qū)，可以幫助我們在需要時(shí)快速找到解決方案。

示例代碼：

const sum = require(‘./sum’);


test('1 + 2 = 3’, () => {
   expect(sum(1, 2)).toBe(3);
});
}

Github： https://github.com/facebook/jest

Mocha

Mocha 是一個(gè)功能豐富的 JavaScript 測試框架，可以運(yùn)行在 Node.js 和瀏覽器中，使異步測試變得簡單有趣。Mocha 測試連續(xù)運(yùn)行，允許靈活和準(zhǔn)確的報(bào)告，同時(shí)將未捕獲的異常映射到正確的測試用例。

Mocha 不支持開箱即用的斷言、模擬等，需要通過組件/插件來添加這些功能。與 Mocha 搭配的最流行的斷言庫包括 Chai、Assert、Should.js 和 Better-assert。

Mocha 具有以下特點(diǎn)：

• 使用簡單：對于不包含復(fù)雜斷言或測試邏輯的較小項(xiàng)目，Mocha 是一個(gè)簡單的解決方案。
• ES模塊支持：Mocha 支持將測試編寫為 ES 模塊，而不僅是使用 CommonJS。

當(dāng)然，Mocha 也是有缺點(diǎn)的：

• 設(shè)置難度大：必須使用額外的斷言庫，這確實(shí)意味著它比其他庫更難設(shè)置。
• 與插件的潛在不一致：Mocha 將測試結(jié)構(gòu)包含為 globals，不必在每個(gè)文件中都使用 includeor 來節(jié)省時(shí)間。require 缺點(diǎn)是插件可能會(huì)要求無論如何都包含這些，從而導(dǎo)致不一致。
• 不支持任意轉(zhuǎn)譯器：在 v6.0.0 之前，Mocha 有一個(gè)允許使用任意轉(zhuǎn)譯器的特性，比如 coffee-script 等，但現(xiàn)在已經(jīng)棄用。

示例代碼：

var assert = require(‘a(chǎn)ssert’);
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

Cypress 是為現(xiàn)代 Web 構(gòu)建的下一代前端測試工具。借助 Cypress，開發(fā)人員可以編寫端到端測試、集成測試和單元測試。Cypress 完全可以在真正的瀏覽器（Chrome、Firefox 和 Edge）中運(yùn)行，不需要驅(qū)動(dòng)程序二進(jìn)制文件。自動(dòng)化代碼和應(yīng)用代碼共享同一個(gè)平臺(tái)，讓開發(fā)人員可以完全控制被測應(yīng)用。Cypress 以其端到端測試功能而聞名，這意味著可以遵循預(yù)定義的用戶行為，并讓該工具在每次部署新代碼時(shí)報(bào)告潛在差異。

Cypress 具有以下特點(diǎn)：

• 端到端測試：由于 Cypress 在真實(shí)瀏覽器中運(yùn)行，因此可以依賴它進(jìn)行端到端用戶測試。
• 時(shí)間軸快照測試：在執(zhí)行時(shí)，Cypress 會(huì)拍下那一刻的快照，并允許開發(fā)人員或 QA 測試人員查看特定步驟發(fā)生的情況。
• 穩(wěn)定可靠：與其他測試框架相比，Cypress 提供了穩(wěn)定可靠的測試執(zhí)行結(jié)果。
• 文檔和社區(qū)：從零到運(yùn)行，Cypress 包含所有必要的信息以幫助開發(fā)人員加快速度，并且它還有一個(gè)活躍的社區(qū)。
• 速度快：Cypress 的測試執(zhí)行速度很快，響應(yīng)時(shí)間不到 20 毫秒。

不過，需要注意的是，Cypress 只能在單個(gè)瀏覽器中運(yùn)行測試。

示例代碼：

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

Storybook

與其他 JavaScript 測試框架不同，Storybook 是一個(gè) UI 測試工具，它為測試組件提供了一個(gè)隔離的環(huán)境。Storybook 還附帶工具、Test runner 以及與更大的 JavaScript 生態(tài)系統(tǒng)的方便集成，以擴(kuò)展 UI 測試覆蓋范圍。

可以通過多種方式使用 Storybook 進(jìn)行 UI 測試：

• 視覺測試：捕獲每個(gè)故事的屏幕截圖，然后將其與基線進(jìn)行比較以檢測外觀和集成問題。
• 輔助功能測試：發(fā)現(xiàn)與視覺、聽覺、移動(dòng)、認(rèn)知、語言或神經(jīng)障礙相關(guān)的可用性問題。
• 交互測試：通過模擬用戶行為、觸發(fā)事件并確保狀態(tài)按預(yù)期更新來驗(yàn)證組件功能。
• 快照測試：檢測渲染標(biāo)記中的更改以顯示表面渲染錯(cuò)誤或警告。
• 將其他測試中的故事導(dǎo)入 QA 甚至更多 UI 特性。

Github： https://github.com/storybookjs/storybook

Jasmine

Jasmine 是一個(gè)簡易的 JavaScript 單元測試框架，其不依賴于任何瀏覽器、DOM、或者是任何 JavaScript 而存在。它適用于所有網(wǎng)站、Node.js 項(xiàng)目，或者是任何能夠在 JavaScript 上面運(yùn)行的程序。Jasmine 以行為驅(qū)動(dòng)開發(fā) (BDD) 工具而聞名。BDD 涉及在編寫實(shí)際代碼之前編寫測試（與測試驅(qū)動(dòng)開發(fā) (TDD)相反）。

Jasmine 具有以下特點(diǎn)：

• API 簡單：它提供了簡潔且易于理解的語法，以及用于編寫單元測試的豐富而直接的 API 。
• 開箱即用：不需要額外的斷言或模擬庫，開箱即用。
• 速度快：由于不依賴任何外部庫，因此速度相對較快。
• 多語言：不僅用于編寫 JS 測試，也可以用于 Ruby（通過Jasmine-gem）或 Python（通過Jsmin-py）

當(dāng)然，Jasmine 也是有有缺點(diǎn)的：

• 污染全局環(huán)境：默認(rèn)情況下，它會(huì)創(chuàng)建測試全局變量（關(guān)鍵字如“describe”或“test”），因此不必在測試中導(dǎo)入它們。在特定情況下，這可能會(huì)成為不利因素。
• 編寫異步測試具有挑戰(zhàn)性：使用 Jasmine 測試異步函數(shù)比較困難。

示例代碼：

describe(“helloWorld”, () => {
    it(“returns hello world”, () => {
      var actual = helloWorld();
      expect(actual).toBe(“hello world”);
    });
  }
)

Github： https://github.com/jasmine/jasmine

React Testing Library

React Testing Library 基于 DOM Testing Library 的基礎(chǔ)上添加一些 API，主要用于測試 React 組件。該庫在使用過程并不關(guān)注組件的內(nèi)部實(shí)現(xiàn)，而是更關(guān)注測試。該庫基于 react-dom 和 react-dom/test-utils，是以上兩者的輕量實(shí)現(xiàn)。

React Testing Library 不像  Jest 那樣是一個(gè) Test runner。事實(shí)上，它們可以協(xié)同工作。React Testing Library 是一組工具和功能，可幫助訪問 DOM 并對其執(zhí)行操作，即將組件渲染到虛擬 DOM 中，搜索并與之交互。

React Testing Library 具有以下特點(diǎn)：

• React 官方推薦：可以在 React 的官方文檔中找到使用此庫的參考和建議。
• 尺寸?。核菍ｉT為測試 React 應(yīng)用/組件而編寫的。

示例代碼：

示例代碼：
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(
    <div onClick={onClose}>
      <div onClick={e => e.stopPropagation()}>
        {children}
        <hr />

        <button onClick={onClose}>Close</button>

      </div>

    </div>,

    el,
  )
}

test(‘modal shows the children and a close button’, () => {
  // Arrange
  const handleClose = jest.fn()

  // Act
  const {getByText} = render(
    <Modal onClose={handleClose}>
      <div>test</div>

    </Modal>,

  )
  // 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

Playwright 是一個(gè)用于端到端測試的自動(dòng)化框架。該框架由 Microsoft 構(gòu)建和維護(hù)，旨在跨主要瀏覽器引擎（Chromium、Webkit 和 Firefox）運(yùn)行。它實(shí)際上是早期 Puppeteer 項(xiàng)目的一個(gè)分支。主要區(qū)別在于，Playwright 是專門為開發(fā)人員和測試人員進(jìn)行 E2E 測試而編寫的。Playwright 還可以與主要的 CI/CD 服務(wù)器一起使用，如 TravisCI、CircleCI、Jenkins、Appveyor、GitHub Actions 等。

Playwright 具有以下特點(diǎn)：

• 多語言：Playwright 支持 JavaScript、Java、Python 和 .NET C# 等多種語言；
• 多個(gè) Test Runner 支持：可以被 Mocha、Jest 和 Jasmine 使用；
• 跨瀏覽器：該框架的主要目標(biāo)是支持所有主流瀏覽器。
• 模擬和原生事件支持：可以模擬移動(dòng)設(shè)備、地理位置和權(quán)限，還支持利用鼠標(biāo)和鍵盤的原生輸入事件。

當(dāng)然，Playwright 也有一些缺點(diǎn)：

• 仍處于早期階段：相當(dāng)較新，社區(qū)支持有限；
• 不支持真實(shí)設(shè)備：不支持用于移動(dòng)瀏覽器測試的真實(shí)設(shè)備，但支持模擬器。

示例代碼：

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

Vitest 是一個(gè)由 Vite 提供支持的極速單元測試框架。其和 Vite 的配置、轉(zhuǎn)換器、解析器和插件保持一致、開箱即用的 TypeScript / JSX 支持、支持 Smart 和 instant watch 模式，如同用于測試的 HMR、內(nèi)置 Tinyspy 用于模擬、打標(biāo)和監(jiān)察等。Vitest 非常關(guān)心性能，使用 Worker 線程盡可能并行運(yùn)行，帶來更好的開發(fā)者體驗(yàn)。

Vitest 具有以下特點(diǎn)：

• Vite 支持：重復(fù)使用 Vite 的配置、轉(zhuǎn)換器、解析器和插件，在應(yīng)用和測試中保持一致。
• 兼容 Jest：擁有預(yù)期、快照、覆蓋等 - 從 Jest 遷移很簡單。
• 智能即時(shí)瀏覽模式：智能文件監(jiān)聽模式，就像是測試的 HMR。
• ESM, TypeScript, JSX：由 esbuild 提供的開箱即用 ESM、TypeScript 和 JSX 支持。
• 源內(nèi)測試：提供了一種在源代碼中運(yùn)行測試以及實(shí)現(xiàn)的方法，類似于 Rust 的模塊測試。

不過，Vitest 仍處于早期階段（最新版本為 0.28.1）。盡管 Vitest 背后的團(tuán)隊(duì)在創(chuàng)建此工具方面做了大量工作，但它還很年輕，社區(qū)支持可能還不是很完善。

示例代碼：

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

AVA 是一個(gè)極簡的 Test Runner，它利用 JavaScript 的異步特性并同時(shí)運(yùn)行測試，從而提高性能。AVA 不會(huì)為創(chuàng)建任何 Globals，因此可以更輕松地控制使用的內(nèi)容。這可以使測試更加清晰，確保確切知道發(fā)生了什么。

AVA 具有以下特點(diǎn)：

• 同時(shí)運(yùn)行測試：利用 JavaScript 的異步特性使得測試變得簡單，最小化部署之間的等待時(shí)間；
• 簡單的 API：通過了一個(gè)簡單的 API，僅提供需要的內(nèi)容；
• 快照測試：通過 jest-snapshot 提供，當(dāng)想知道應(yīng)用的 UI 何時(shí)意外更改時(shí)，這非常有用；
• Tap 格式報(bào)告：Ava 默認(rèn)顯示可讀的報(bào)告，也可以獲得 TAP 格式的報(bào)告。

當(dāng)然，AVA 也有一些缺點(diǎn)：

• 沒有測試分組：Ava 無法將相似的測試組合在一起。
• 沒有內(nèi)置的模擬：Ava 未附帶模擬，不過可以使用第三方庫（如Sinon.js）。

示例代碼：

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