單元測試 jest 從零開始搭建簡易的單元測試

時間 2019-12-05

標籤單元測試 jest 開始搭建簡易简体版

原文原文鏈接

js、ts使用jest經相單元測試css

不少教程，可是可能我這個更加通俗易懂，特寫，勿噴。webpack

安裝依賴

cnpm install ts-jest jest  @types/jest --save-dev
複製代碼

配置

1: 修改package.jsoin，在"scipts"添加"test": "jest", 以下git

"scripts": {
    "start": "webpack-dev-server",
    "build": "webpack --mode production",
    "test": "jest"
},
複製代碼

2: 添加一個jest.config.js文件github

填入以下內容web

module.exports = {
    "moduleFileExtensions": [
        "js",
        "ts",
        "tsx"
    ],
    "transform": {
        "^.+\\.tsx?$": "ts-jest",
    },
    "testMatch": [
        "<rootDir>/tests/**/*.ts?(x)"
    ]
}
複製代碼

經過testMatch能夠看到咱們是檢測工程/tests/ 文件下的內容npm

通常是推薦在文件下面寫測試文件，可是我比較喜歡在外面寫。bash

而後添加一個測試文件webpack-dev-server

添加測試文件

這是個人目錄，能夠參考單元測試

編寫測試

參考下QAQ 具體看官方文檔 jestjs.io/docs/zh-Han…測試

import { getSTyleStr, id } from '../../src/utils/utils'

test('id', () => {
    expect(id(1)).toBe(1)
    expect(id(null)).toBe(null)
    expect(id(void 0)).toBe(void 0)
})
describe('css class utils getSTyleStr', () => {
    it('帶大寫的屬性', () => {
        expect(getSTyleStr({backgroundColor: "rgba(216,52,52,1)"}))
        .toBe('background-color: rgba(216,52,52,1);')
    })
    it('單個屬性', () => {
        expect(getSTyleStr({width: "30px", height: "30px"}))
        .toBe('width: 30px;height: 30px;')
    })
})
複製代碼