配置库支持需要如下库支持jest jest 的核心babel-jest .js/.jsx/.tsx 文件支持需要@babel/core babel-jest 依赖,babel 核心ts-jest .ts babel/preset-env @types/jest @testing-library/jest-dom @vue/test-utils@next vue-jest@next babel-jest ts-jest json", "jsx", "ts", "tsx", "node", "vue"], transform: { "^.+\\.vue$": "vue-jest", "^.+\\.ts$": "ts-jest
一块分支逻辑或者一行代码 在该函数, 分支逻辑或者代码行的上一行添加 /* istanbul ignore next */ 支持 Typescript 执行 yarn add -D typescript ts-jest @types/jest 安装 typescript 和声明 并在 jest.config.js 中添加 preset: 'ts-jest' 将 plus.js 重命名为 plus.ts export 类型 有时你可能会希望不校验 ts 类型, 仅执行代码测试, 比如需要在 CI 中将类型校验和单元测试分为两个任务 在 jest.config.js 中添加如下内容 globals: { 'ts-jest 要测试的模块可能依赖于其他模块或者第三方 npm 包的结果, 我们可以使用 Mock Functions[4] 对其进行 mock // test/mock.spec.ts import { mocked } from 'ts-jest
npm i -D jest @types/jest ts-jest ts-jest包是Jest理解TypeScript所需要的。另一个选择是使用babel,这将需要更多的配置和额外的模块。 我们就保持简洁,采用ts-jest。 使用如下命令初始化jest配置文件: ./node_modules/.bin/jest --init 一路狂按回车键就行,默认值就很好。 preset: "ts-jest", // ... } 最后,创建src目录,以及测试文件src/digx.test.ts,填入如下代码: import dg from ".
$": "babel-jest" } TS 代码,需要额外安装一个 ts-jest 包来解析 transform: { "^.+\\. (ts|tsx|js)$": "ts-jest" } 在项目中配置了别名。
添加单元测试 npm install --save-dev jest ts-jest @types/jest 创建 jestconfig.json文件: { "transform": { " $": "ts-jest" }, "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)
Guide[18] 提交规范:Commitizen[19] + Commitlint[20] 单元测试:vue-test-utils[21] + jest[22] + vue-jest[23] + ts-jest It targets Vue 3. jest[43] Delightful JavaScript Testing. vue-jest[44] Jest Vue transformer ts-jest[45 安装这些工具为开发依赖(devDependencies): npm i @vue/test-utils@next jest vue-jest@next ts-jest -D 创建 jest 配置文件 ", // ts 文件用 ts-jest 转换 }, // 匹配 __tests__ 目录下的 .js/.ts 文件 或其他目录下的 xx.test.js/ts xx.spec.js/ts : https://github.com/kulshekhar/ts-jest [46] 创建 GitHub 仓库: https://github.com/new [47] GitHub Token:
的配置项,可以借鉴一下 使用jest+enzyme进行react项目测试 - debug篇:虽说是 2017 年的文章,仍旧有可借鉴性 Debugging with TypeScript, Jest, ts-jest
$": "ts-jest" // 匹配 .ts 或者 .tsx 结尾的文件 }, collectCoverage: true, // 统计覆盖率 testEnvironment:
我们就保持简洁,采用ts-jest。使用如下命令初始化jest配置文件:./node_modules/.bin/jest --init一路狂按回车键就行,默认值就很好。 preset: "ts-jest", // ...}最后,创建src目录,以及测试文件src/digx.test.ts,填入如下代码:import dg from ".
增加依赖 npm i ts-jest @types/jest typescript @types/node --save-dev 其中 ts-jest 为 Jest + Typescript 环境下进行测试提供了类型检查支持和预处理 "ts", "tsx", "node" ], // A preset that is used as a base for Jest's configuration preset: "ts-jest
代替 ts-jest 使用 esbuild-jest 代替ts-jest,我曾经尝试在某些大型包中使用 esbuild-jest 来作为 transformer,相比 ts-jest,整体大概提升 3
. */ } } 这里也可以用tsc --init来初始化, 需要你全局安装typescript这个包 安装jest的开发环境依赖 yarn add jest ts-jest @types/jest -D 配置jest.config.js /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */ /* * For a detailed notifyMode: "failure-change", // A preset that is used as a base for Jest's configuration preset: 'ts-jest
(ts|tsx)": "ts-jest" }, "testEnvironment": "node", "testRegex": "(/__tests__/.*|\\. "semantic-release": "^15.9.16", "shelljs": "^0.8.3", "travis-deploy-once": "^5.0.9", "ts-jest
$': 'ts-jest', }, preset: 'ts-jest', testEnvironment: 'jsdom', collectCoverage: true, coverageDirectory
由于本项目没有采用 Babel 进行转译,并且希望能够完美支持类型检查,因此采用 ts-jest[107] 进行单元测试。 按照官方教程进行依赖安装和项目初始化: npm install --save-dev jest typescript ts-jest @types/jest npx ts-jest config:init 子啊根目录的 ject.config.js 文件中进行 Jest 配置修改: module.exports = { preset: "ts-jest", testEnvironment: " 项目就是采用了该插件进行 ESLint 校验,具体可查看配置文件 `ts-jest/.eslintrc.js`[115]),这里仍然采用推荐的规则配置: module.exports = { root /user/babel7-or-ts [107] ts-jest: https://kulshekhar.github.io/ts-jest/user/install#customizing [108]
通过官网的Getting started 我们可以在最下方找到 ts-jest 不难理解,我们需要配的其实就是jest加载到什么样类型的文件,使用什么预处理来处理文件。
pnpm i -D @babel/preset-react react-test-renderer @types/react-test-renderer identity-obj-proxy pnpm i ts-jest @types/jest -D 接着生成基本配置文件进行初始化 npx ts-jest config:init // ts版本 npx jest --init // js版本 npm set-script
安装jest,和类型声明@types/jest,它执行需要ts-node和ts-jest 这里暂时固定了ts-node的版本为 v9.1.1,新版的ts-node@v10.0.0会导致jest报错,等待官方修复 ,详见:issues npm i jest @types/jest ts-node@9.1.1 ts-jest -D 初始化配置文件 npx jest --init 然后修改jest.config.ts // A preset that is used as a base for Jest's configuration - // preset: undefined, + preset: 'ts-jest
希望能把重点放在 vue3 的实现原理,如需要 会在后面做修改补充 所以需要安装如下的依赖包: jest (核心包) typescript (核心包) @types/jest (jest 语法 ts 解释) ts-jest preset-typescript (babel ts 预设) babel-jest (jest es依赖包) 附带安装指令:npm install jest typescript @types/jest ts-jest /preset-typescript" ] } 复制代码 创建 jest.config.js 文件,配置 jest 依赖包,配置如下 module.exports = { preset: 'ts-jest
安装依赖 首先使用下面命令安装jest yarn add -D jest 如果你项目使用的是Typescript,则还需要安装ts-jest作为依赖: yarn add -D ts-jest 配置jest $": "ts-jest" }, "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?) "jsx", "json", "node" ] } } 上面各个配置项的意思分别是: transform: 告诉jest,你的ts或者tsx文件需要使用ts-jest