TypeScript Jest 单元测试 搭建

NPM TypeScript 项目搭建

创建目录

bash 复制代码
mkdir mockproject

cd mockproject

初始化NPM项目

bash 复制代码
npm init -y

安装TypeScript

bash 复制代码
npm i -D typescript

使用VSCode 打开项目

创建TS配置文件tsconfig.json

json 复制代码
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": true,
    "outDir": "./lib",
    "strict": true,
    "lib": ["es6"]
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

创建src 目录,创建文件src/index.ts 内容如下:

ts 复制代码
export const Hello = (name: string) => `Hello ${name}`;

在package.json中的scripts中添加ts的构建命令

json 复制代码
"build": "tsc"

CTRL + ` 打开终端测试构建。

bash 复制代码
npm run build

构建完成后可以发现项目目录中多了lib 里面就是我们的Hello函数。

Jest 单元测试集成

安装依赖

bash 复制代码
npm i -D jest ts-jest @jest/globals

安装后package.json中开发依赖将会出现如下:

生成Jest配置文件

bash 复制代码
npx ts-jest config:init

jest.config.js 生成内容如下:

js 复制代码
/** @type {import('ts-jest').JestConfigWithTsJest} **/
module.exports = {
  testEnvironment: "node",
  transform: {
    "^.+.tsx?$": ["ts-jest",{}],
  },
};

在package.json中添加单元测试命令,若原来有test命令则删除,填入一下内容。

json 复制代码
"test": "jest"

通常会建立一个tests目录用于存放测试用例,tests中的测试用名称与被测试对象名称保持一致,但是添加上.test.ts后缀,目录结构也保持一致。

创建测试目录tests,创建测试文件tests/index.test.ts

ts 复制代码
import { describe, expect, test } from '@jest/globals';
import { Hello } from '../src/index';

describe('Mock module', () => {
    test('Hello world', () => {
        expect(Hello("abc")).toBe("Hello abc");
    });
});

打开终端使用测试命令执行测试

bash 复制代码
npm run test

可以看到执行测试后执行我们定义的测试用例,并提示了Pass的提示。

参考文献

1\]. [掘金 . \[译文\]一步步构建发布一个 TypeScript NPM 包 . 小被子 . 2019.07 . https://juejin.cn/post/6844903892119977998](https://juejin.cn/post/6844903892119977998) \[2\]. [jest . Getting Started . 2024 . https://jestjs.io/docs/getting-started](https://jestjs.io/docs/getting-started)

相关推荐
一只大侠的侠14 分钟前
React Native for OpenHarmony:Calendar 日程标记与事件管理实现方案
javascript·react native·react.js
西门吹-禅31 分钟前
node PM2 常用命令使用
javascript
一只大侠的侠1 小时前
React Native实战:高性能Overlay遮罩层组件封装与OpenHarmony适配
javascript·react native·react.js
嵌入式×边缘AI:打怪升级日志1 小时前
第十一章:主控访问多个传感器(Modbus 网关/桥接器设计)
开发语言·javascript·ecmascript
观音山保我别报错1 小时前
抽奖项目-接口自动化测试
功能测试·测试工具·单元测试
Highcharts.js2 小时前
Highcharts 3D漏斗图(Funnel 3D)完全指南:从模块加载到一文学会三维漏斗可视化
javascript·开发文档·highcharts·图表开发·漏斗图·3d 图表
我是伪码农2 小时前
Vue 2.11
前端·javascript·vue.js
UIUV2 小时前
构建Git AI提交助手:从零到全栈实现的学习笔记
前端·后端·typescript
wuhen_n2 小时前
JavaScript 防抖与节流进阶:从原理到实战
前端·javascript
打瞌睡的朱尤2 小时前
Vue day11商品详细页,加入购物车,购物车
前端·javascript·vue.js