单元测试 jest 从零开始搭建简易的单元测试

js、ts使用jest经相单元测试

很多教程，但是可能我这个更加通俗易懂，特写，勿喷。

安装依赖

cnpm install ts-jest jest  @types/jest --save-dev

配置

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

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

2: 添加一个jest.config.js文件

填入如下内容

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

通过testMatch可以看到我们是检测 工程/tests/ 文件下的内容

一般是推荐在文件下面写测试文件，但是我比较喜欢在外面写。

然后添加一个测试文件

添加测试文件

这是我的目录，可以参考

编写测试

参考下QAQ 具体看官方文档 https://jestjs.io/docs/zh-Hans/getting-started

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;')
    })
})

运行

npm run test

完美通过

这是我们如果写错了，如下

源码查看： https://github.com/0123cf/layout-ui

相关链接：

https://jestjs.io/docs/zh-Hans/getting-started
https://github.com/0123cf/layout-ui

--END--