13161216443

您所在位置: 首頁> 學習課程> java培訓 | JavaScript測試教程,用 Jest 進行單元測試

java培訓 | JavaScript測試教程,用 Jest 進行單元測試

發布百知教育 來源:學習課程 2019-11-14

本文是 JavaScript 測試教程 系列中的第1部分

  • 1. JavaScript測試教程-part 1:用 Jest 進行單元測試

  • 2. JavaScript測試教程–part 2:引入 Enzyme 并測試 React 組件

  • 3. JavaScript測試教程–part 3:測試 props,掛載函數和快照測試

  • 4. JavaScript測試教程–part 4:模擬 API 調用和模擬 React 組件交互

有多種不同種類的測試,我會首先解釋其中的一部分。首先,我將介紹單元測試的基礎知識,即測試應用程序的每個部分并檢查它們是否適合使用。為此我們將使用 Facebook 開發的測試框架Jest。它已經準備就緒,并具有進行測試所需的功能。

測試的類型

測試是用來檢查你代碼的代碼。測試會使你對自己的程序更有信心。它們還能夠防止你在修復一個 bug 時生成另一個 bug。你可以測試程序的方方面面,從單個函數及其返回值到在瀏覽器中運行的復雜程序。由于這是本課程的第一篇文章,因此我會簡要對比一些流行的測試類型。

單元測試

單元測試覆蓋了代碼塊,確保它們在運行時沒有問題。被測試的單元可以是函數、模塊和類等。單元測試應該相互隔離并且彼此獨立。對于給定的輸入,用單元測試檢查結果,通過盡早發現問題并避免退化,可以幫助你確保程序的每個部分都能按預期工作。

集成測試

即使你的所有單元測試都通過了,也只能代表每個部分可以正常工作。盡管如此,該程序仍可能失敗。集成測試涵蓋跨模塊流程,其中各個模塊在一起工作時進行組合和測試。多虧了他,你可以用一種方法來確保你的代碼在整體上能夠正常運行。

端到端測試(E2E)

與其他類型的測試相反,端到端測試始終在瀏覽器(或類似瀏覽器)環境中運行。它可能是打開的真正瀏覽器,并且在其中運行測試。它也可能是無頭瀏覽器環境,即沒有用戶界面運行的瀏覽器。E2E 測試的重點是在我們正在運行的程序中模擬實際用戶。他們將模擬滾動,單擊和鍵入之類的行為,并從實際用戶的角度檢查我們的程序是否運行良好。

用 Jest 進行單元測試

Jest 是 Facebook 開發的測試框架。它的目標之一是通過現成可用的工具提供“零配置”體驗。它已經存在了一段時間,并且快速可靠。

1npm install --save-dev jest

別忘了把它添加到 npm 腳本中。

package.json
1"scripts": {
2  "test""jest"
3}

為了簡單起見,我在這里將 Jest 與簡單的純 Node.js 模塊一起使用(不包括 webpack)。稍后我們將學習如何在 React 中使用 Jest

首先,讓我們創建一些可以測試的簡單函數。

divide.js
1function divide(a, b{
2  return a / b;
3}
4module.exports = divide;

Jest 用正則表達式確定要測試的文件。默認情況下,如果它們位于 tests 目錄中或以 test .spec 為后綴,將執行 .js  .jsx 文件。你可以在項目的 package.json 文件中用 testRegex 屬性指定。

package.json
1"jest": {
2  "testRegex""(/__tests__/.*|(\\.|/)(test|spec))\\.jsx?$"
3}

最后,讓我們創建測試文件。為了遵循默認的命名配置,我們將其命名為 divide.test.js。

divide.test.js
1const divide = require('./divide');
2
3test('dividing 6 by 3 equals 2', () => {
4  expect(divide(63)).toBe(2);
5});

 npm run test 命令運行該測試:

1 PASS  ./divide.test.js
2  ? dividing 6 by 3 equals 2 (5ms)

test 函數用來運行測試。它包含三個參數:測試的名稱,包含期望值的函數和超時(以毫秒為單位)。超時默認為 5 秒,并指定如果測試花費的時間太長,則中止測試之前要等待多長時間。

expect 函數用于測試值。作為參數,它接受你要測試的值:在我們的例子中,它是 divide 函數的返回。你可以調用一組 matcher 函數(例子中使用的 toBe)以某種方式測試該值。有關完整信息,請訪問 Jest 文檔。

分組測試

每個文件通常會有一個以上的測試。使用 Jest,你可以使用 describe 函數對它們進行分組。它創建了一個可以合并多個測試的塊。為了更好地顯示它,讓我們在全局 Math 【https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random】對象上進行一些測試。

 1describe('in the math global object', () => {
2
3  describe('the random function', () => {
4    it('should return a number', () => {
5      expect(typeof Math.random()).toEqual('number');
6    })
7    it('should return a number between 0 and 1', () => {
8      const randomNumber = Math.random();
9      expect(randomNumber).toBeGreaterThanOrEqual(0);
10      expect(randomNumber).toBeLessThan(1);
11    })
12  });
13
14  describe('the round function', () => {
15    it('should return a rounded value of 4.5 being 5', () => {
16      expect(Math.round(4.5)).toBe(5);
17    })
18  });
19
20})

你可能會注意到用了 it 函數而不是 test 函數。它是常用的別名。運行 it === test 會返回 true。

像這樣對測試進行分組可以使代碼更整潔。你應該關心程序代碼和對其進行測試的代碼的質量。

如果出現問題,除了使代碼更具可讀性之外,它還有助于提供更友好的錯誤消息。如果將測試改為包含  expect(typeof Math.random()).toEqual('string'),則會看到以下消息:

1 FAIL  ./math.test.js
2  ● in the math global object ? the random function ? should return a number
3
4    expect(received).toEqual(expected)
5
6    Expected value to equal:
7      "string"
8    Received:
9      "number"

總結

作為介紹,我們已經解釋了最基本的 JavaScript 測試類型。涵蓋的第一類測試是“單元測試”。為了執行它們,我們已經了解了 Jest 框架的基礎知識。它包括有關如何運行測試(安裝和文件命名)的知識。為了運行測試,我們使用了test、 it  describe 函數。


Java培訓:http://www.akpsimsu.com/java2019


作者:Marcin Wanago

翻譯:瘋狂的技術宅

來源:wanago.io


上一篇:11月編程排行榜,IT培訓就業選擇哪個編程語言?

下一篇:應屆生去公司找個Java程序員的職位需要什么技能?

相關推薦

www.akpsimsu.com

有位老師想和您聊一聊

關閉

立即申請