Jest單元測試詳解

Jest是一個流行的JavaScript測試框架，特別針對React應用程序的測試。Jest具有快速創建和運行測試的功能，在測試方面提供了很多特性，如快照測試和模擬。

一、Jest框架介紹

Jest是由Facebook開發的JavaScript測試框架，提供了一組豐富的功能，包括模擬、異步測試、斷言和覆蓋範圍。Jest非常易於使用，並且可以在任何JavaScript項目中進行使用。

要使用Jest，我們需要在項目中安裝它。

npm install jest --save-dev

一旦安裝完成，我們可以編寫測試用例並使用Jest運行它們。

// sample.test.js
test('simple test', () => {
  expect(2 + 2).toBe(4);
});

在項目根目錄下運行以下命令可以運行測試。

npx jest

二、Jest測試用例編寫

在編寫Jest測試用例時，我們需要遵循一些約定：

• 測試文件使用 .test.js 作為文件擴展名。
• 測試文件中的測試用例由 test() 函數定義。
• expect() 函數用於測試用例中行為的斷言。

下面是一個簡單的Jest測試示例。

const calculator = require('./calculator');

test('addition works as expected', () => {
  expect(calculator.add(2, 2)).toBe(4);
});

test('subtraction works as expected', () => {
  expect(calculator.subtract(4, 2)).toBe(2);
});

test('multiplication works as expected', () => {
  expect(calculator.multiply(2, 2)).toBe(4);
});

test('division works as expected', () => {
  expect(calculator.divide(4, 2)).toBe(2);
});

在上面的代碼中，我們測試了一個計算器的加、減、乘、除四種操作，測試過程中使用了calculator對象、add()、subtract()、multiply() 和 divide()。

三、Jest斷言

Jest提供了很多可以用來編寫測試用例的斷言函數，如toBe()、toEqual()等。

toBe()用於比較兩個基本類型的值是否嚴格相等，即值和類型都要匹配。

test('2+2 equals 4', () => {
  expect(2 + 2).toBe(4);
});

toEqual()函數比較複雜類型的值，會逐個比較鍵與鍵值對。如果值是對象或數組，它會遞歸地檢查每個字段。如果值是函數，則會檢查它們的內容是否相同。

test('object assignment', () => {
  const data = {one: 1};
  data.two = 2;
  expect(data).toEqual({one: 1, two: 2});
});

Jest還提供了不同的斷言函數來檢查測試用例中的異步代碼行為，如beforeAll()、afterAll()、beforeEach()、afterEach()等。

四、Jest模擬

Jest允許我們模擬函數和模塊，以便更好地編寫測試用例。

在編寫測試用例時，我們經常需要模擬函數或依賴，以便在捕獲更多情況時進行測試。

Jest提供了如下的模擬方法：

• jest.fn()用於模擬函數。
• jest.mock()用於模擬整個模塊。

下面是一個模擬函數的示例。

const myFunc = jest.fn();

myFunc.mockReturnValue(10);

console.log('mocked result:', myFunc()); // 'mocked result: 10'

下面是一個模擬模塊的示例。

// utils.js
module.exports = {
  getUser: (id) => {
    return { id: id, name: 'Bob' };
  };
};

// user.test.js
const utils = require('./utils');

jest.mock('./utils');

test('should fetch user', () => {
  const user = { id: 1, name: 'Bob' };
  utils.getUser.mockReturnValue(user);
  expect(utils.getUser(1)).toEqual(user);
});

五、Jest快照測試

Jest提供了一個稱為快照測試的功能，它允許我們將組件的輸出與預期的輸出進行比較。

快照測試不僅適用於React組件，而且可以用於任何輸出。

使用快照測試非常簡單，只需在測試用例中使用toMatchSnapshot()函數。

import React from 'react';
import renderer from 'react-test-renderer';
import App from './App';

test('App component snapshot', () => {
  const component = renderer.create();
  const tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

快照測試會在首次運行測試時生成一個快照文件，如果後續測試中輸出與快照不匹配，則測試失敗。這個功能可以幫助我們快速找出組件或代碼輸出的更改。

六、總結

Jest是一個功能強大的JavaScript測試框架，提供了許多特性來幫助我們編寫更好的測試用例。本文介紹了Jest框架的基礎知識、Jest的測試用例編寫和Jest的斷言等內容。同時，也介紹了Jest模擬和快照測試的用例，幫助大家更好地理解和使用Jest。在開發過程中，編寫測試用例是非常重要的，Jest可以有效地幫助我們進行良好的測試，保證代碼質量。