创建 vite vue ts 模板:Setup Jest
安装配置jest
- 我们项目中使用的是
typescript。要正确设置jest,我们还需要安装ts-jest软件包。
$ npm install --save-dev is ts-is @types / is
2.git add -u
3.git commit -m 'install jest'
- 初始化我们的
ts-jest配置。
$ npx ts-jest 配置:初始化
5.在package.json中添加test脚本
"格式": "更漂亮 --write .",
- “lint”:“eslint .--ext .js,.jsx,.ts,.tsx,.vue”
+ "lint": "eslint .--ext .js,.jsx,.ts,.tsx,.vue",
+“测试”:“是”
6.git add package.json jest.config.js
7.git commit -m 'add jest config'
配置jest查看
- 为了让 jest 和
vue一起工作,我们需要vue-jest包。最近它被拆分为vue2-jest和vue3-jest(我们将使用这个),目前处于 alpha 阶段。但我们仍然会使用它,因为这是唯一支持jest >= 27.x的版本。此外,为了更好地使用vue进行测试,我们将安装@vue/test-utils-
Vue.js 的官方测试工具库
$ npm install --save-dev vue3-jest@27.0.0-alpha.2 @vue/test-utils@next
2.更新jest.config.js
测试环境:'节点',
+变换:{
+ '^.+\.vue$': 'vue3-jest',
+ },
+ moduleFileExtensions:['json','js','jsx','ts','tsx','vue']
3.git add -u
4.git commit -m 'install vue-jest and @vue/test-utils'
添加测试
1.mkdir -p tests/unit
2.touch tests/unit/HelloWorld.spec.ts
3.在tests/unit/HelloWorld.spec.ts添加我们的测试
+import { shallowMount } from '@vue/test-utils'
+从'@/components/HelloWorld.vue'导入HelloWorld
+
+describe('HelloWorld.vue', () u003d> {
+ it('通过时渲染 props.msg', () u003d> {
+ const msg u003d '新消息'
+ 常量包装器 u003d shallowMount(HelloWorld, {
+道具:{味精},
+ })
+ 期望(wrapper.text()).toMatch(msg)
+ })
+})
4.git add -u
5.git commit -m 'add test'
- 运行测试。
$ npm 运行测试
固定error TS7016: Could not find a declaration file for module '@vue/test-utils'
- 如果运行测试导致这种情况。
$ npm 运行测试
> vite-vue-typescript-starter@0.0.0 测试
> 是
失败测试/单元/HelloWorld.spec.ts
● 测试套件无法运行
测试/单元/HelloWorld.spec.ts:1:30 - 错误 TS7016:找不到模块“@vue/test-utils”的声明文件。 '/path/to/project/vue-ts/node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js' 隐含了一个 'any' 类型。
如果存在,请尝试`npm i --save-dev @types/vue__test-utils`或添加包含`declare module '@vue/test-utils';`的新声明 (.d.ts) 文件
1 从“@vue/test-utils”导入 { shallowMount }
~~~~~~~~~~~~~~~~~
测试套件:1 个失败,总共 1 个
测试:共 0
快照:共 0 个
时间:3.376 秒
运行所有测试套件。
- 这是由于版本
2.0.0-rc.11中的一个错误,该错误已在2.0.0-rc.12中修复。
*https://github.com/vuejs/vue-test-utils-next/releases/tag/v2.0.0-rc.12
*https://github.com/vuejs/vue-test-utils-next/issues/799
*https://github.com/vuejs/vue-test-utils-next/pull/800
3.更新到@vue/test-utils的更新版本。
$ npm install --save-dev @vue/test-utils@2.0.0-rc.12
4.git add -u
5.git commit -m 'fix: TS7016 missing declaration file for @vue/test-utils by updating it to 2.0.0-rc.12'
固定Cannot find module '@/components/HelloWorld.vue' from 'tests/unit/HelloWorld.spec.ts'
1.如果运行测试导致。
$ npm 运行测试
> vite-vue-typescript-starter@0.0.0 测试
> 是
失败测试/单元/HelloWorld.spec.ts
● 测试套件无法运行
无法从“tests/unit/HelloWorld.spec.ts”中找到模块“@/components/HelloWorld.vue”
1 |从“@vue/test-utils”导入 { shallowMount }
> 2 |从“@/components/HelloWorld.vue”导入 HelloWorld
| ^
3 |
4 |描述('HelloWorld.vue', () u003d> {
5 | it('通过时渲染 props.msg', () u003d> {
在 Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:311:11)
在 Object.<匿名> (tests/unit/HelloWorld.spec.ts:2:1)
测试套件:1 个失败,总共 1 个
测试:共 0
快照:共 0 个
时间:2.735 秒
运行所有测试套件。
- 出现此问题是因为
jest无法解析@/路径。
*https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping
*https://jestjs.io/docs/configuration#modulenamemapper-objectstring-string--arraystring
- 更新
jest.config.js修复此问题。
+模块名称映射器:{
+ '^@/(.*)$': '<rootDir>/src/$1',
+ },
4.git add -u
5.git commit -m "fix: jest can't find @/ path"
固定ReferenceError: document is not defined
1.如果运行测试导致。
$ npm 运行测试
> vite-vue-typescript-starter@0.0.0 测试
> 是
失败测试/单元/HelloWorld.spec.ts
你好世界.vue
✕ 通过时渲染 props.msg (2 ms)
● HelloWorld.vue › 在传递时渲染props.msg
下面的错误可能是使用了错误的测试环境导致的,见 https://jestjs.io/docs/configuration#testenvironment-string。
考虑使用“jsdom”测试环境。
ReferenceError:文档未定义
5 | it('通过时渲染 props.msg', () u003d> {
6 | const msg u003d '新消息'
> 7 | const wrapper u003d shallowMount(HelloWorld, {
| ^
8 |道具:{味精},
9 | })
10 |期望(wrapper.text()).toMatch(味精)
挂载时(node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:7640:14)
在 Object.shallowMount (node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:7852:12)
在 Object.<匿名> (tests/unit/HelloWorld.spec.ts:7:21)
测试套件:1 个失败,总共 1 个
测试:1 次失败,总共 1 次
快照:共 0 个
时间:4.061 秒
运行所有测试套件。
- 如错误信息所示,我们可以通过更新
jest.config.js来修复此错误
- 测试环境:'节点',
+ testEnvironment: 'jsdom',
3.git add -u
4.git commit -m 'fix: using wrong env for jest'
在 Github Actions 中运行测试
- 将
bulid.yml重命名为ci.yml,以便更全面地了解此工作流的内容。
$ git mv .github/workflows/{build,ci}.yml
2.更新.github/workflow/ci.yml
-名称:Node.js CI
+名称:CI
上:
推:
@@ -28,6 +28,7 @@ 工作:
缓存:'npm'
- 运行:海平面以上
- 运行:npm 运行构建
+ - 运行:npm 运行测试
3.更新README.md中的徽章
-
+
4.git add -u
5.git commit -m 'setup github workflow to run tests'
链接
-
https://jestjs.io
-
https://kulshekhar.github.io/ts-jest/
-
https://github.com/vuejs/vue-jest
-
https://www.npmjs.com/package/vue3-jest
-
https://next.vue-test-utils.vuejs.org/installation/
-
https://github.com/lmiller1990/vtu-next-demo
项目
imomaliev/vue-ts
Quick + View + TypeScript 模板
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献21233条内容
所有评论(0)