大家好，我是 CUGGZ。

在前端測試中，框架可以把測試代碼抽離出來，作為一個整體結構化地去設計測試用例，放到專門的測試文件中，也可以實現自動運行以及顯示測試結果。下面就來看看常用的測試框架有哪些，它們都有哪些優缺點！

前端測試通常可以分為以下三種：

• ?單元測試：將代碼的各個部分分開，對軟件中的最小可測試單元進行檢查和驗證；
• 集成測試：測試多個單元能否協調工作；
• 端到端測試（E2E）：從頭到尾測試整個軟件產品，以確保應用程序流按預期運行。

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

Jest

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

Jest 具有以下特點：

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

示例代碼：

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


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

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

Mocha

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

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

Mocha 具有以下特點：

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

當然，Mocha 也是有缺點的：

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

示例代碼：

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

Cypress 是為現代 Web 構建的下一代前端測試工具。借助 Cypress，開發人員可以編寫端到端測試、集成測試和單元測試。Cypress 完全可以在真正的瀏覽器（Chrome、Firefox 和 Edge）中運行，不需要驅動程序二進制文件。自動化代碼和應用代碼共享同一個平臺，讓開發人員可以完全控制被測應用。Cypress 以其端到端測試功能而聞名，這意味著可以遵循預定義的用戶行為，并讓該工具在每次部署新代碼時報告潛在差異。

Cypress 具有以下特點：

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

不過，需要注意的是，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

Storybook

與其他 JavaScript 測試框架不同，Storybook 是一個 UI 測試工具，它為測試組件提供了一個隔離的環境。Storybook 還附帶工具、Test runner 以及與更大的 JavaScript 生態系統的方便集成，以擴展 UI 測試覆蓋范圍。

可以通過多種方式使用 Storybook 進行 UI 測試：

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

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

Jasmine

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

Jasmine 具有以下特點：

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

當然，Jasmine 也是有有缺點的：

• 污染全局環境：默認情況下，它會創建測試全局變量（關鍵字如“describe”或“test”），因此不必在測試中導入它們。在特定情況下，這可能會成為不利因素。
• 編寫異步測試具有挑戰性：使用 Jasmine 測試異步函數比較困難。

示例代碼：

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 的基礎上添加一些 API，主要用于測試 React 組件。該庫在使用過程并不關注組件的內部實現，而是更關注測試。該庫基于 react-dom 和 react-dom/test-utils，是以上兩者的輕量實現。

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

React Testing Library 具有以下特點：

• React 官方推薦：可以在 React 的官方文檔中找到使用此庫的參考和建議。
• 尺寸小：它是專門為測試 React 應用/組件而編寫的。

示例代碼：

示例代碼：
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 是一個用于端到端測試的自動化框架。該框架由 Microsoft 構建和維護，旨在跨主要瀏覽器引擎（Chromium、Webkit 和 Firefox）運行。它實際上是早期 Puppeteer 項目的一個分支。主要區別在于，Playwright 是專門為開發人員和測試人員進行 E2E 測試而編寫的。Playwright 還可以與主要的 CI/CD 服務器一起使用，如 TravisCI、CircleCI、Jenkins、Appveyor、GitHub Actions 等。

Playwright 具有以下特點：

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

當然，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

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

Vitest 具有以下特點：

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

不過，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

AVA 是一個極簡的 Test Runner，它利用 JavaScript 的異步特性并同時運行測試，從而提高性能。AVA 不會為創建任何 Globals，因此可以更輕松地控制使用的內容。這可以使測試更加清晰，確保確切知道發生了什么。

AVA 具有以下特點：

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

當然，AVA 也有一些缺點：

• 沒有測試分組：Ava 無法將相似的測試組合在一起。
• 沒有內置的模擬：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