使用 typescript 來(lái)寫(xiě)測(cè)試

wemall 發(fā)布于2019-05-29 17:09 / 3639人閱讀

摘要：使用來(lái)寫(xiě)測(cè)試介紹編寫(xiě)測(cè)試的重要性我就不說(shuō)了使用的好處我也不說(shuō)了那么接下來(lái)就讓我們使用來(lái)更好的編寫(xiě)測(cè)試吧安裝依賴(lài)運(yùn)行會(huì)幫我們生成一個(gè)配置文件在根目錄下新增如果項(xiàng)目原來(lái)就是寫(xiě)的話，肯定會(huì)有這個(gè)文件，沒(méi)有的話，需要新增一個(gè)。

使用 typescript 來(lái)寫(xiě)測(cè)試 介紹

編寫(xiě)測(cè)試的重要性我就不說(shuō)了
使用 ts 的好處我也不說(shuō)了
那么接下來(lái)就讓我們使用 ts 來(lái)更好的編寫(xiě)測(cè)試吧

安裝依賴(lài)

yarn add -D typescript ts-jest jest @types/jest

Config File

運(yùn)行yarn ts-jest config:init, ts-jest 會(huì)幫我們生成一個(gè) jest 配置文件jest.config.js

module.exports = {
  preset: "ts-jest",
  testEnvironment: "node"
}

tsconfig.jest.json

在根目錄下新增tsconfig.json,如果項(xiàng)目原來(lái)就是 ts 寫(xiě)的話，肯定會(huì)有這個(gè)文件，沒(méi)有的話，需要新增一個(gè)。但是，有時(shí)候我們測(cè)試環(huán)境跟開(kāi)發(fā)環(huán)境的 ts 配置是有區(qū)別的，所以我們可以新增一個(gè)tsconfig.jest.json來(lái)區(qū)分不同環(huán)境的 ts 配置

{
  "extends": "./tsconfig",
  "compilerOptions": {
    "jsx": "react"
  }
}

這樣的話，之前的jest.confg.js就需要修改了，因?yàn)槟J(rèn)讀的是tsconfig.json

module.exports = {
  globals: {
    "ts-jest": {
      tsConfigFile: "tsconfig.jest.json"
    }
  },
  testEnvironment: "node"
}

其他配置參考ts-jest

新增測(cè)試

現(xiàn)在可以開(kāi)始使用 ts 愉快的編寫(xiě)測(cè)試了,在根目錄下新增test/a.test.ts文件
參考文檔jest

import sum from "./sum"

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3)
})

運(yùn)行測(cè)試

yarn jest

yarn jest --coverage

總結(jié)

使用 ts 編寫(xiě)測(cè)試的好處，實(shí)際上就是 ts 的好處。比如，有完善的 api 提示；避免低級(jí)錯(cuò)誤；等等。
這就完了？對(duì)，這就完了。現(xiàn)在已經(jīng)可以簡(jiǎn)單的寫(xiě)一些單元測(cè)試了，當(dāng)然我們的應(yīng)用不可能這么簡(jiǎn)單就能測(cè)得了的，肯定會(huì)有很多亂七八糟的依賴(lài)，所以，下一篇講 “使用 ts、 enzyme 測(cè)試 react-redux 應(yīng)用”。