單元測試

時間 2021-02-14

標籤 css react git github web json sass babel app less 欄目 CSS 简体版

原文原文鏈接

最近想給本身的ui輪子寫一個單元測試,爲何會這麼想呢?由於它能漲工資呀,哈哈哈,固然咱們學習是不能那麼功利的(放P,哈哈哈)css

除了漲工資沒別的了?固然不是,他是有它的好處的,不然學他幹嗎react

單元測試的好處是啥?git

重構、重構、重構，重要的事情說三遍
TDD（測試驅動開發）的具體實現就是經過紅燈->綠燈->重構不斷重複，一步一步去健壯咱們的代碼，保證從此重構代碼的時候測試的準確，能夠在重構中準確的定位到問題。同時也爲之後的開發提供支持，在測試的基礎上咱們能夠重構結構和業務功能。
單元測試是最好的註釋
測試會提示你哪些步驟是能夠經過、如何使用的最好文檔。更詳細的規範了測試目標的邊界值與非法值。
定位bug，減小bug
單元測試能夠經過不一樣的條件來發現問題在哪裏，在一些弱類型的語言中也避免了一些類型檢查的低級錯誤，固然這個如今咱們都用TypeScript作到了。
被迫的規範組織結構
可能平時咱們會把一個方法寫的很複雜、一個類寫的很大，沒有想過如何去組織結構，但若是你想到你即將的測試要如何寫的時候，那可能你在開發前必需要想一想哪些部分能夠提出來了。這樣會慢慢養成很好的思惟。

好了,很少BB,看看怎麼用吧!!! github

我用的是jest測試哦!!!web

首先開始看一下我以前的配置,以前的文章有個人配置,避免你找的煩,我把配置放在這裏https://github.com/sunkuangdo... 須要的請自行下載吧!json

1.看一下個人jest.config.js中testMatch,告訴我須要在lib文件夾中建立個目錄__tests__,__tests__的目錄裏面xxxx.unit.(js|jsx|ts|tsx)這樣的文件就是測試文件

那就建立個文件夾和文件唄

2.我要測試啥呢?我先測試我ui輪子裏面的一個函數,試一下sass

這是我以前寫的一個函數,就測試他,他會接受一個className

3.在classes.unit.jsx裏面寫一個,單元測試babel

// 先將測試文件導入進來
import classes from "../helpers/classes";
// 要在describe裏面進行測試
describe('classes', () => {
  // it是聲明,第一個參數是對測試的描述,第二個參數是函數,裏面是對測試的執行
  it('他接受 className', () => {
    // 我給classes函數傳了一個字符串a
    const result = classes('a')
    // 我斷言result會是一個字符串a
    expect(result).toEqual('a')
  })
})

4.哈哈哈,興高采烈的運行一下,若是你是yarn而且用的我得配置,就用yarn test
MMP,報錯了,說我少了一個配置'babel-preset-react-app',安裝一下唄app

yarn add --dev babel-preset-react-app

5.安裝成功了,再來一下看看yarn test,哎,成功,真香!

6.每次改寫測試文件,都要我yarn test,好煩....,試試這個操做yarn test --watch,每次更改都會自動測試啦!
7.我要是想測試一個icon組件怎麼辦?來,咱們繼續搞起來
看下面這段代碼less

import * as renderer from 'react-test-renderer'
import React from "react";
import Icon from '../icon'

describe("icon",()=>{
  it("ICON 是 SVG",()=>{
    // 首先用renderer建立一個Icon,而後把Icon轉成json
    const json = renderer.create(<Icon/>).toJSON();
    // 這個json進行快照
    expect(json).toMatchSnapshot()
  })
})

8.當我運行到這裏覺得能夠進行測試的時候,意外出現了....bug了,緣由是我測試的Icon組件中有用到scss沒有配置,沒法識別
首先在test目錄下建立新的目錄,並建立下面的兩個文件

而後在file-mock.js中加入這段代碼module.exports = 'test-file-stub';在object-mock.js中加入這段代碼module.exports = {};
最外層找到jest.config.js文件,替換這段

moduleNameMapper: {
        "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/__mocks__/file-mock.js",
        "\\.(css|less|sass|scss)$": "<rootDir>/test/__mocks__/object-mock.js",
    },

上面這段代碼這裏來解釋一下:

測試時候,全部的jpg|jpeg|等等用/test/__mocks__/file-mock.js替換掉
測試時候,全部的(css|less|sass|scss)用/test/__mocks__/object-mock.js替換掉

9.哈哈哈,再跑一下,嗯.....,本覺得解決了,唉!!!新問題出現了,來源於這個文件的報錯

嗯?我測試的時候也不須要測試svg啊,果斷的刪除console.log(error),這樣子就不報錯了
10.咱們來看一下這段代碼expect(json).toMatchSnapshot(),他作了什麼樣的事情,咱們看一下.snap

<svg
  className="fui-icon"
>
  <use
    xlinkHref="#undefined"
  />
</svg>

他會幫咱們生成一個svg,爲何use會是undefined???由於我尚未給他傳name值,給name傳遞一個值,從新運行yarn test以後,報錯了

他說咱們修改了內容,可是快照沒有修改,與快照不一樣,這時候須要從新運行,修改快照裏面的內容,從新運行yarn test -u意味着保存咱們最新的正確的快照

11.咱們來測試一下onClick,首先下載兩個庫enzyme和enzyme-adapter-react-16,運行

yarn add --dev enzyme
yarn add --dev enzyme-adapter-react-16

配置test目錄下的setupTests.js文件

const enzyme = require('enzyme')
  const Adapter = require('enzyme-adapter-react-16')

  enzyme.configure({adapter: new Adapter()})

接下來咱們onClick進行測試,一點一點看他表達了什麼意思
咱們是要測試一個點擊事件函數,導入了這個庫以後,這個庫幫咱們生成了一個假的頁面,並將測試的函數傳入Icon組件,找到svg模擬點擊svg,咱們本身建立一個fn測試看看對不對,咱們期待n等於2,若是不肯定是否測試成功,將n改爲1試一試

import {mount} from 'enzyme'
 
 describe("icon", () => {
     it("onClick", () => {
         let n = 1;
         const fn = () => {
             n = 2
         }
         // 生成假想頁面
         const comonent = mount(<Icon name="baidu" onClick={fn}/>)
         // 找到svg模擬點擊svg
         comonent.find('svg').simulate('click')
         // 咱們期待n等於2
         expect(n).toEqual(2)
     })
 })

可是咱們這個方法有點笨,每次測試都要本身寫個fn,傻乎乎的!!!
能不能讓jest幫咱們寫一個fn呢
const fn = jest.fn();這段代碼是讓jest建立一個fn()
expect(fn).toBeCalled();咱們期待fn會被調用

it("onClick", () => {
      const fn = jest.fn();
      const component = mount(<Icon name="baidu" onClick={fn}/>)
      component.find('svg').simulate('click')
      expect(fn).toBeCalled();
  })

運行yarn test,測試經過了,可是咱們不知道是否是真的進行測試了,建立一個fn2,這個fn2咱們並不會傳,看看報錯了沒有,報錯了,就是真的測試了,說明onClick被調用了,測試經過了