前端單元測試學習（1）—— 單測入門之react單測項目初步

單測是什麼

單元測試時用來對一個模塊、函數或者列進行正確性檢驗的測試工做，所謂的正確性，就是保證同一單元，在給定輸入下，總能獲得預期的輸出前端

單測的好處

保證代碼正常：設計合適的測試用例來測試代碼，能夠保證代碼的正確性，提升對代碼的信心
提高代碼質量：耦合度高、功能不清晰的代碼在作單測的時候是比較困難的，而單測的存在能夠推進對代碼的合理重構，對提高代碼質量有幫助
進行迴歸測試：當須要對系統進行重構的時候，單測能夠爲重構的過程保駕護航，驗證重構後系統功能的正確性以及保證系統的穩定性
全面測試場景：能夠經過構建數據來觸發不一樣的測試場景，對於一些人工測試時不便觸發的場景，單測能夠構造參數進行觸發，支持的場景更加全面
幫助理解需求、熟悉代碼：寫單測的過程當中須要梳理需求，從而進一步理解需求，同時好的單測也是不錯的代碼文檔，有助於團隊新成員經過單測瞭解代碼的功能

測試模式

在軟件開發中常見有兩種開發模式，一種叫TDD，另一種叫BDD，筆者在此以前聽到比較多的是TDD，BDD也是在後面工做中聽到後才瞭解的，網上有很多關於這方面的講解，筆者這裏就不作過多的講解，只從本身的認識簡單講一講react

TDD (Test Driven Development 測試驅動開發)

在這種模式下通常會先寫測試用例,或者是開發和測試同時編寫，當對應的功能模塊開發完成的時候，對應的測試用例也是開發完成。以筆者的工做經驗距離，在一些版本迭代的時候會有一些技術評審，這時候前端開發能夠對當前的一些功能或者模塊作組件設計，一些可能通用的類或者方法會提出來，或者在開發的過程當中發現某些功能或者過程能夠抽象出通用的方法，這時候就能夠提早先針對預設的組件或者方法先寫好單測，或者在開發過程當中抽取類或者方法的同時順便編寫單測用例，這時候經過單測的編寫能夠明確類或方法提供的功能，還有預期的輸入和對應輸出結果。git

BDD (Behavior Driven Development 行爲驅動開發)

這種模式通常是去到用戶行爲的維度，通常是在完成業務代碼開發以後，以用戶行爲指導編寫測試用例。以筆者的工做經驗舉例，在版本迭代開始的時候會有QA的同事進行用例編寫，同時QA會將寫好的測試用例（通常是以腦圖的形式）發出來作一個評審，QA同事提供的這個腦圖至關因而一個開發這邊的測試用例參考，由於在需求和實際的一些交互還有一些邊界問題可能在開發過程當中才發現，因此通常會早業務代碼完成開發以後才編寫測試用例，避免重複的修改測試用例。github

具體工做中的實踐選擇

TDD通常是偏向於類方法工具等維度，若是是開發一個工具包或者類、方法等，這種TDD的指導思想是比較適合的，不過TDD也是會偏向於開發過程理想化的一個，在實際開發中可能給到的開發時間是相對緊湊的，因此提早寫單測或者一邊開發一邊寫單測會佔用一部分時間，因此不必定會進行。BDD偏向於用戶行爲的編寫，會作總體業務模塊的測試，這種在軟件開發中不少時候是經過人工完成的，筆者見到的對用戶行爲的用例編寫並非不少。總的來講兩種模式仍是得結合着來，根據實際編寫的是業務邏輯仍是類方法等採用不一樣的模式。正則表達式

技術選型

由於筆者平時開發的技術棧是用的react，這裏就主要是針對react的單測進行學習typescript

Jest 單測的集大成者，Facebook出品
react-tesing-library 提供一些操做react component的API，並且使用create-react-app腳手架生成的已經默認用react-testing-libray，可見官方也是比較推薦這個react-test
enzyme 也是同react-tesing-libray相相似的一個庫，react-tesing-library相對比較簡單，對於enzyme咱們這裏不作介紹和使用
pnpm 包管理工具，沒有裝pnpm的也能夠用npm和yarn
pnpx 同npx同樣的命令行工具
typescript 看我的開發習慣，筆者比較習慣ts開發因此選擇

項目初始化

這裏咱們用pnpx加上create-react-app建一個簡單的項目npm

pnpx create-react-app react-unit-test-study --template typescript
複製代碼

若是沒有裝pnpm的話可使用npxjson

npx create-react-app react-unit-test-study --template typescript
複製代碼

若是不想使用ts的話，直接去掉上面的這個template參數便可，以下瀏覽器

pnpx create-react-app react-unit-test-study
複製代碼

建立完成以後create-react-app會有相應的提示，咱們跟着提示進入到目錄中而後啓動項目便可markdown

cd react-unit-test-study
pnpm start
複製代碼

能夠正常跑起來，默認是3000端口，若是本地3000端口被佔用的話，會有提示是否用其餘端口，輸入y便可，能夠看到下面這個就算成功了

項目走讀

筆者也是有一段時間沒有用create-react-app，用的時候才發現加了很多新的東西，比以前簡單的結構多了一些東西，也包括咱們要學習的這個單測相關的東西，這裏簡單作個分析

package.json裏面的包

@testing-library/jest-dom 寫單測的時候咱們會有須要用到檢查元素的屬性、文本內容，樣式類名等，這個庫就是拓展了jest的能力，提供jest machers來加強能力，將使測試更具聲明性、閱讀和維護更清晰。
@testing-library/react testing-libray裏面關於react的部分，由於咱們是針對react來作單測，因此要用這個庫
@testing-library/user-event 提供一些模擬用戶與瀏覽器交互的事件，方便咱們斷言測試操做後預期的一些效果
@types/jest jest的一些類型定義，由於這裏用到了ts，因此加上這個包增長代碼提示

文件說明

這裏主要關心兩個文件

setupTest.ts 全局的測試文件，會幫咱們引入一些全局的額東西，好比咱們用到的這個**@testing-library/jest-dom**
App.test.tsx 針對App.tsx的單測文件

看一下這個App.test.tsx

import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});
複製代碼

首先是定義了一個test，能夠理解爲一個測試單元，而後引入了App這個入口文件，經過render這個Api來渲染這個組件，由於咱們作單測的環境裏面其實是沒有瀏覽器環境的，因此咱們須要經過拓展的這個render方法來渲染出一個組件，而後就是第二步，在頁面中根據文案查找對應的元素，這裏用到了screen這個範圍，實際上咱們也能夠經過render返回值中獲取對應的查詢方法，例如getByText，這裏先不展開細說，注意這裏用到了正則表達式，最下面是一個斷言，斷言這個元素是存在於document中的。

運行單測

這裏直接運行test這個名利便可

pnpm test
複製代碼

結語

到這一步咱們的項目就建立好，也運行了預置的單測，後面就能夠開始進入單測代碼的編寫