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)

相关推荐
幻影七幻几秒前
js中send的作用和使用 $.ajax的作用
开发语言·前端·javascript
我是Superman丶39 分钟前
Antigravity Retry 自动重试脚本
前端·javascript·vue.js
im_AMBER1 小时前
Leetcode 162 除了自身以外数组的乘积 | 接雨水
开发语言·javascript·数据结构·算法·leetcode
Komorebi_99992 小时前
前端开发|18 个高频易错知识点汇总(HTML+CSS+JS+Vue)面试 & 开发通用
javascript·css·html
Wenzar_2 小时前
# D3.js实战进阶:从基础图表到交互式数据仪表盘的全流程构建在现代前端开发中,**数据可视化已成为提升用户体验的核心能力之一
java·javascript·python·信息可视化·ux
菜鸟小码2 小时前
MapReduce 编程模型详解:Mapper、Reducer、Driver 三大核心组件
大数据·javascript·mapreduce
林恒smileZAZ3 小时前
CSS 滚动驱动动画(scroll-timeline):无 JS 实现滚动特效
前端·javascript·css
俺不会敲代码啊啊啊3 小时前
el-table实现行拖拽(包含展开项)
前端·vue.js·typescript
懒人村杂货铺3 小时前
Express + TypeScript 后端通用标准规范
javascript·typescript·express
kyriewen3 小时前
你的数据该在哪儿拿?Next.js三种姿势一次讲清
前端·javascript·next.js