Logo

菜单

发布于 2026-01-06 10 阅读
0

使用 TypeScript 和 Jest 进行 Jest Typescript 单元测试

使用 TypeScript 和 Jest 进行Jest Typescript单元测试

vscode-jest

原文发表于https://muhajirframe.com/writing/unit-test-typescript-jest/

本文将尝试介绍 Typescript + jest 中的简单单元测试。

我们将创建一个简单的实用程序，用于检测 URL 是内部链接还是外部链接。
例如，` https://www.google.comhttps://example.com/` 是外部链接，而 `https://example.com/`/page1是内部链接。我们将项目命名为 ` is-internal-linkexample.com`，但您可以随意命名。

先决条件

  • NodeJS
  • VSCode + Jest 插件（可选）

创建新目录

mkdir is-internal-link
Enter fullscreen mode Exit fullscreen mode

初始化 npm

npm init
Enter fullscreen mode Exit fullscreen mode

安装依赖项

npm install --save-dev @types/jest @types/node jest ts-jest typescript
Enter fullscreen mode Exit fullscreen mode

创造jest.config.js

module.exports = {
  roots: ['<rootDir>/src'],
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
}
Enter fullscreen mode Exit fullscreen mode

创造tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["es2015"],
    "strict": true,
    "declaration": true,
    "outDir": "dist",
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}
Enter fullscreen mode Exit fullscreen mode

好了，我们准备编写代码了。创建文件src/main.ts，src/main.spec.ts
你的文件树现在应该看起来像这样。

.
├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── main.spec.ts
│   └── main.ts
└── tsconfig.json
Enter fullscreen mode Exit fullscreen mode

用你喜欢的编辑器打开它（VSCode、Atom、Sublime 等）。
我个人使用 VSCode。

import { isInternalLink } from './main'

test('should return false given external link', () => {
  expect(isInternalLink('https://google.com')).toBe(false)
})

test('should return true given internal link', () => {
  expect(isInternalLink('/some-page')).toBe(true)
})
Enter fullscreen mode Exit fullscreen mode

现在没有办法测试这一点。

方法一

打开你的package.json. 并将其替换scripts为 。

 "scripts": {
    "test": "jest"
  },
Enter fullscreen mode Exit fullscreen mode

运行npm run test。
现在你应该会看到错误，因为我们还没有实现代码，对吧？

方法二

使用编辑器插件即可。我更喜欢这种方式。我只会在 VSCode 上演示。你常用的编辑器可能也有这个功能。

安装vscode-jest

vscode-jest
这个 GIF 应该能很好地解释 vscode-jest 的工作原理。

我们继续。
vscode-jest

你的 VSCode 现在可能看起来像这样。

实现代码

让我们实施我们的main.ts

export const isInternalLink = (link: string) => /^\/(?!\/)/.test(link)
Enter fullscreen mode Exit fullscreen mode

切换回你的界面main.spec.ts。现在你应该会看到错误消失了，界面变成绿色。

专业提示：使用VSCode 分屏编辑器可以同时查看代码（main.ts）和规范（ ）。main.spec.ts

太长不看

main.ts第一侧打开cmd+1 cmd+p main.ts

main.spec.ts第二侧开口cmd+2 cmd+p1 main.spec.ts

附注：我是 VSCode 和 Vim 的忠实粉丝，并且有很多关于如何利用 VSCode 提高效率的小技巧。如果你们感兴趣，请在评论区告诉我，我可以在这里写出来。

恭喜！

你刚刚使用 TypeScript 和 Jest 完成了单元测试。

文章来源：https://dev.to/muhajirdev/unit-testing-with-typescript-and-jest-2gln
✨ GitHub Actions ...
CSS 速成：border-rad...