基於 TS 實現 axios（九）

這一章是最後一章，主要是進行單元測試。

jest

什麼是 jest

jest 是 Facebook 弄出來的一個 JavaScript 的測試框架，這個是很好用的。

我把的它的官網地址放在了這裏：https://jestjs.io/zh-Hans/

安裝 jest

由於我們的項目是使用 typescript-library-starter 初始化的，已經內置了 Jest 的安裝，但是安裝的版本卻不是最新的，我們可以對 package.json 中的相關依賴版本做修改，重新安裝來進行更新。

{
  "@types/jest": "^24.0.13",
  "jest": "^24.8.0",
  "jest-config": "^24.8.0",
  "ts-jest": "^24.0.2",
  "typescript": "^3.4.5"
}

jest 配置

在 package.json 文件中有 jest 字段，對應 Jest 配置：

"jest": {
  "transform": {
    ".(ts|tsx)": "ts-jest"
  },
  "testEnvironment": "jsdom",
  "testRegex": "/test/.*\\.(test|spec)\\.(ts)$",
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js"
  ],
  "coverageThreshold": {
    "global": {
      "branches": 90,
      "functions": 95,
      "lines": 95,
      "statements": 95
    }
  },
  "collectCoverageFrom": [
    "src/*.{js,ts}",
    "src/**/*.{js,ts}"
  ],
  "setupFilesAfterEnv": [
    "<rootDir>/test/boot.ts"
  ]
},

這些配置可以在官網查看其文檔

使用

在進行配置前我們要寫好單元測試，在根目錄下 test/helpers/util.ts 中寫一些單元測試

import {
    isDate,
    isPlainObject,
    isFormData,
    isURLSearchParams,
    extend,
    deepMerge
  } from '../../src/helpers/util'
  
  describe('helpers:util', () => {
    describe('isXX', () => {
      test('should validate Date', () => {
        expect(isDate(new Date())).toBeTruthy()
        expect(isDate(Date.now())).toBeFalsy()
      })
  
      test('should validate PlainObject', () => {
        expect(isPlainObject({})).toBeTruthy()
        expect(isPlainObject(new Date())).toBeFalsy()
      })
  
      test('should validate FormData', () => {
          let fromdata = new FormData();

        expect(isFormData(fromdata)).toBeTruthy()
        expect(isFormData({})).toBeFalsy()
      })
  
      test('should validate URLSearchParams', () => {
        expect(isURLSearchParams(new URLSearchParams())).toBeTruthy()
        expect(isURLSearchParams('foo=1&bar=2')).toBeFalsy()
      })
    })
  
    describe('extend', () => {
      test('should be mutable', () => {
        const a = Object.create(null)
        const b = { foo: 123 }
  
        extend(a, b)
  
        expect(a.foo).toBe(123)
      })
  
      test('should extend properties', function() {
        const a = { foo: 123, bar: 456 }
        const b = { bar: 789 }
        const c = extend(a, b)
  
        expect(c.foo).toBe(123)
        expect(c.bar).toBe(789)
      })
    })
  
    describe('deepMerge', () => {
      test('should be immutable', () => {
        const a = Object.create(null)
        const b: any = { foo: 123 }
        const c: any = { bar: 456 }
  
        deepMerge(a, b, c)
  
        expect(typeof a.foo).toBe('undefined')
        expect(typeof a.bar).toBe('undefined')
        expect(typeof b.bar).toBe('undefined')
        expect(typeof c.foo).toBe('undefined')
      })
  
      test('should deepMerge properties', () => {
        const a = { foo: 123 }
        const b = { bar: 456 }
        const c = { foo: 789 }
        const d = deepMerge(a, b, c)
  
        expect(d.foo).toBe(789)
        expect(d.bar).toBe(456)
      })
  
      test('should deepMerge recursively', function() {
        const a = { foo: { bar: 123 } }
        const b = { foo: { baz: 456 }, bar: { qux: 789 } }
        const c = deepMerge(a, b)
  
        expect(c).toEqual({
          foo: {
            bar: 123,
            baz: 456
          },
          bar: {
            qux: 789
          }
        })
      })
  
      test('should remove all references from nested objects', () => {
        const a = { foo: { bar: 123 } }
        const b = {}
        const c = deepMerge(a, b)
  
        expect(c).toEqual({
          foo: {
            bar: 123
          }
        })
  
        expect(c.foo).not.toBe(a.foo)
      })
  
      test('should handle null and undefined arguments', () => {
        expect(deepMerge(undefined, undefined)).toEqual({})
        expect(deepMerge(undefined, { foo: 123 })).toEqual({ foo: 123 })
        expect(deepMerge({ foo: 123 }, undefined)).toEqual({ foo: 123 })
  
        expect(deepMerge(null, null)).toEqual({})
        expect(deepMerge(null, { foo: 123 })).toEqual({ foo: 123 })
        expect(deepMerge({ foo: 123 }, null)).toEqual({ foo: 123 })
      })
    })
  })
  

其中的一些 describe 、test 都是 jest 提供的，這需要去看相關的文檔

運行：

npm test

就會在命令行返回一些東西，用來檢測到底是否正確，會有一些說明文檔

剩下的打包，發佈我不準備寫了 ，完結了，就到這裏吧！

可以來 GitHub 上查看我的源碼，網址是：https://github.com/zhaosirlaile/ts-axios