前言#
由于需要阅读一个typescript源码的包,这个包自身带有单元测试,可以利用这个测试集来调试源码。但是并不知道这个单元测试如何用,所以学习过程中写这篇文章加深自己印象。
这是jest的文章,感兴趣的大佬可以看下。
官方文档#
Installation | ts-jestkulshekhar.github.io/ts-jest/docs/getting-started/installation
创建环境#
先创建个文件夹ts-jest-study,然后初始下环境
mkdir ts-jest-study
cd ts-jest-study
npm init --yes babel + jestts-jest
有两种方法测试ts文件,两种我们都试下。
其实官方有给出这两种方式的比较,不过学习嘛,那肯定得都过一遍才行~
Babel7 or TypeScript | ts-jestkulshekhar.github.io/ts-jest/docs/babel7-or-ts/
方式一:babel + jest#
安装我们需要的东西
npm install typescript jest @babel/core @babel/core @babel/preset-env @babel/preset-typescript jest babel-jest @types/node @types/jest -D@babel/preset-typescript: 这个包我上篇文章中有提到,感兴趣的大佬可以看下。就是用来解析支持ts文件的。
babel-jest: 之前的文章中也介绍过,感兴趣的大佬也可以看下。是通知jest执行测试文件时采用babel来转换,也是支持ts的。
@types/node、@types/jest:@types/xxx都是ts的类型声明包,安装这类包之后会有代码代码提示和类型判断,可以用下面这个链接去找对应的包
@types - npm searchwww.npmjs.com/search?q=@types
然后创建babel.config.js
module.exports = {
presets: [
['@babel/preset-env', { targets: { node: 'current' } }],
['@babel/preset-typescript']
]
} 其中@babel/preset-env这个包不是必要的,不想装可以不装。targets: 告诉babel当前支持node的版本为当前安装的node版本 ,然后babel会自动判断是否需要对某些代码进行转换。
接着我们创建jest.config.js文件
module.exports = {
"transform": {
"\\.[jt]sx?$": "babel-jest"
},
}
通知jest在测试这些文件时调用babel转换。
ok,配置完了,我们创建个src文件夹,然后在里面创建一个__tests__文件夹和一个index.ts文件,而__tests__文件夹也创建一个index.spec.ts文件。
mkdir src
cd src
echo > index.ts
mkdir __tests__
echo > __tests__/index.spec.ts
cd ../ 然后随便在我们的index.ts文件中写点东西
function testName (name: string | undefined): string | undefined {
return name
}
module.exports = {
testName
}然后在我们的index.spec.ts文件中导入测试
const index = require('../index')
test('test-name', () => {
expect(index.testName('jack')).toBe('jack')
}) 最后在package.json文件中新增script
"test": "jest" 然后终端执行npm run test

测试成功!
这种配置方式有一个缺点,实际上执行的文件并不是js文件,而是被babel转换后的js文件,如果你需要对类型进行测试,那么这里并不能很好的支持。
方式二:ts-jest#
先来看下官网的介绍

简单地说就是针对方式一的缺点做的优化,支持类型检测和直接ts文件测试不需要经过转换。
话不多说,直接上手。
我们重新开个文件夹ts-jest-study-2,这包名有点尴尬。。。。
cd ../
mkdir ts-jest-study-2
cd ts-jest-study-2
npm init --yes
npm install jest ts-jest typescript @types/node @types/jesr -D
mkdir src
echo > src/index.ts
mkdir __tests__
echo > __tests__/index.spec.ts
echo > jest.config.js然后我们配置下jest.config.js,实际上jest可以不需要配置文件,但是ts-jest就需要,不然它没法分辨ts文件。
让我们来配置下jest.config.js,这里配置文件也可以用npx来执行
npx ts-jest config:init或者在package.json中配置下script
"scripts": {
"create-config": "ts-jest config:init"
}然后终端执行npm run create-config。
/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
};这里preset配置为ts-jest之后才会调用ts-jest这个包
然后我们随便在index.ts中搞点东西
function testName (name: string | undefined): string | undefined {
return name
}
module.exports = {
testName
}然后index.spec.ts中引入
const index = require('../src/index')
test('ts-jest-1', () => {
expect(index.testName('132')).toBe(132)
})然后package.json中配置下script: "test": "jest"。
终端中执行npm run test

运行成功!
如果觉得对你有用,点个赞~谢谢!
参考#
编辑于 2022-10-26 09:29
