Vite vue ts tailwind模板:设置Jest覆盖并添加测试
·
启用和设置测试覆盖率
-
为了在 Jest 中启用覆盖,我们需要在我们的配置中将
collectCoverage设置为true。 -
默认情况下,覆盖将在所有文件上运行。为了避免这种情况,让我们配置 Jest以仅在我们的
src目录和实际代码文件上收集覆盖率。
3.更新我们的jest.config.js
差异 --git a / is.config.js b / is.config.js
索引 0b17c77..f718135100644
---一个/jest.config.js
+++ b / jest.config.js
@@ -9,4 +9,12 @@ module.exports u003d {
模块名称映射器:{
'^@/(.*)$': '<rootDir>/src/$1',
},
+ collectCoverage:真,
+ collectCoverageFrom:[
+ 'src/**/*.{js,jsx,ts,tsx,vue}',
+ // 不包括类型声明
+ '!src/**/*.d.ts',
+ // 不要覆盖 main.ts,因为它不可测试
+ '!src/main.ts',
+ ],
}
4.git add -u
5.git commit -m 'enable jest coverage'
- 在启用覆盖率的情况下运行测试
$ npm 运行测试
> vite-vue-typescript-starter@0.0.0 测试
> 是
通过测试/单元/HelloWorld.spec.ts
你好世界.vue
✓ 通过时渲染 props.msg (41 ms)
------|---------|----------|---------|- --------|--------------------
文件 | % 语句 | % 分支 | % 功能 | % 行 |未覆盖线#s
------|---------|----------|---------|- --------|--------------------
所有文件 | 57.14 | 100 | 100 | 57.14 |
源代码 | 0 | 100 | 100 | 0 |
应用程序.vue | 0 | 100 | 100 | 0 | 7-10
源/组件 | 100 | 100 | 100 | 100 |
HelloWorld.vue | 100 | 100 | 100 | 100 |
------|---------|----------|---------|- --------|--------------------
测试套件:1 个通过,共 1 个
测试:1 次通过,共 1 次
快照:共 0 个
时间:3.88 秒
运行所有测试套件。
更新.gitignore用于覆盖和其他常用文件
1.当我们创建了vue-ts模板
[
](/imomaliev)[
创建 vite vue ts 模板:创建 vite 项目
Sardorbek Imomaliev ・ 21 年 7 月 27 日 ・ 1 分钟阅读
#quick #view #typescript
](/imomaliev/create-vite-project-460p)
最初的.gitignore文件是作为vite/vue-ts脚手架的一部分创建的。
- 但是这个
.gitignore不包括覆盖范围之类的通用配置。这就是为什么我们在检查git status时会收到此消息。
$ 混帐状态
在分支主
您的分支领先于 'origin/main' 2 次提交。
(使用“git push”发布你的本地提交)
要提交的更改:
(使用“git restore --staged <file>...”取消暂存)
新文件:tests/unit/App.spec.ts
未跟踪的文件:
(使用“git add <file>...”来包含将要提交的内容)
覆盖范围/
3.coverage/文件夹包含生成的报告。我们应该将它添加到.gitignore。为此,我们将使用Node.gitignore来自非常有用的.gitignore集合由 github存储库。
展开 .gitignore 差异
差异 --git a/.gitignore b/.gitignore
索引 d451ff1..0b799e4100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,122 @@
-node_modules
-.DS_Store
+# 日志
+日志
+*.log
+npm-debug.log*
+yarn-debug.log*
+纱线错误日志*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# 诊断报告 (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# 运行时数据
+pids
+*.pid
+*.种子
+*.pid.lock
+
+# 由 jscoverage/JSCover 生成的检测库目录
+ lib-cov
+
+# 伊斯坦布尔等工具使用的覆盖目录
+覆盖范围
+*.lcov
+
+# 纽约测试覆盖率
+.nyc_output
+
+# Grunt 中间存储 (https://gruntjs.com/creating-plugins#storing-task-files)
+.咕噜
+
+# Bower 依赖目录 (https://bower.io/)
+凉亭组件
+
+# 节点 waf 配置
+.lock-wscript
+
+# 编译的二进制插件 (https://nodejs.org/api/addons.html)
+构建/发布
+
+# 依赖目录
+node_modules/
+jspm_packages/
+
+# Snowpack 依赖目录 (https://snowpack.dev/)
+web_modules/
+
+# TypeScript 缓存
+*.tsbuildinfo
+
+# 可选的 npm 缓存目录
+.npm
+
+# 可选的 eslint 缓存
+.eslintcache
+
+# 微包缓存
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# 可选的 REPL 历史
+.node_repl_history
+
+# 'npm pack' 的输出
+*.tgz
+
+# 纱线完整性文件
+.纱线完整性
+
+# dotenv 环境变量文件
+.env
+.env.test
+.env.生产
+
+# parcel-bundler 缓存 (https://parceljs.org/)
+.cache
+.包裹缓存
+
+# Next.js 构建输出
+.下一个
+输出
+
+# Nuxt.js 构建/生成输出
+.nuxt
距离
+
+# 盖茨比文件
+.缓存/
+# 如果您的项目使用 Gatsby 而不是 Next.js,请在公共行中添加注释
+# https://nextjs.org/blog/next-9-1#public-directory-support
+#公开
+
+# vuepress 构建输出
+.vuepress/dist
+
+# 无服务器目录
+.serverless/
+
+# FuseBox 缓存
+.fusebox/
+
+# DynamoDB 本地文件
+.dynamodb/
+
+# TernJS 端口文件
+.tern 端口
+
+# 存储用于测试 VSCode 扩展的 VSCode 版本
+.vscode-测试
+
+# 纱线 v2
+.yarn/缓存
+.yarn/拔掉插头
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+#项目
dist-ssr
*。当地的
4.git add -u
5.git commit -m 'Setup .gitignore from https://github.com/github/gitignore/blob/master/Node.gitignore'
为src/App.vue添加测试
- 为了获得 100% 的报告覆盖率,我们将对
src/App.vue添加测试。
2.touch tests/unit/App.spec.vue。
3.更新tests/unit/App.spec.vue。
diff --git a/tests/unit/App.spec.ts b/tests/unit/App.spec.ts
新文件模式100644
索引00..b050a5c
--- /dev/null
+++ b/tests/unit/App.spec.ts
@@ -0,0 +1,9 @@
+import { mount } from '@vue/test-utils'
+从'@/App.vue'导入应用程序
+
+describe('App.vue', () u003d> {
+ it('有标题', () u003d> {
+ const 包装器 u003d mount(App)
+ expect(wrapper.html()).toMatch('<h1>Hello Vue 3 + TypeScript + Vite</h1>')
+ })
+})
- 运行我们的测试
$ npm 运行测试
> vite-vue-typescript-starter@0.0.0 测试
> 是
通过测试/单元/HelloWorld.spec.ts
失败测试/单元/App.spec.ts
● 测试套件无法运行
Jest 遇到了意外的令牌
Jest 无法解析文件。发生这种情况,例如当您的代码或其依赖项使用非标准 JavaScript 语法时,或者当 Jest 未配置为支持此类语法时。
开箱即用的 Jest 支持 Babel,它将用于根据您的 Babel 配置将您的文件转换为有效的 JS。
默认情况下,转换器会忽略“node_modules”文件夹。
以下是您可以执行的操作:
• 如果您尝试使用 ECMAScript 模块,请参阅 https://jestjs.io/docs/ecmascript-modules 了解如何启用它。
• 要转换一些“node_modules”文件,您可以在配置中指定自定义“transformIgnorePatterns”。
• 如果您需要自定义转换,请在配置中指定“转换”选项。
• 如果您只是想模拟您的非 JS 模块(例如二进制资产),您可以使用“moduleNameMapper”配置选项将它们存根。
您将在文档中找到这些配置选项的更多详细信息和示例:
https://jestjs.io/docs/configuration
有关自定义转换的信息,请参阅:
https://jestjs.io/docs/code-transformation
细节:
/Users/batiskaf/Development/personal/vue-ts/src/assets/logo.png:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){�PNG
SyntaxError:无效或意外的令牌
25 |边距顶部:60px;
26 | }
> 27 | </style>
| ^
28 |
在 Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1479:14)
在 Object.<匿名> (src/App.vue:27:18)`
...
修复SyntaxError: Invalid or unexpected token错误
1.幸运的是错误信息中有线索
细节:
/Users/batiskaf/Development/personal/vue-ts/src/assets/logo.png:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){�PNG
为什么 Jest 抱怨我们的logo.png可能看起来很奇怪,但这告诉我们需要更新我们的jest.config.js以启用*.png文件的transforming。
2.我们将按照@vue/cli-plugin-unit-jest的例子设置jest-transform-stub
3.安装npm install --save-dev jest-transform-stub
4.更新jest.config.js。
diff --git a/jest.config.js b/jest.config.js
index f718135..15a2d43 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -4,6 +4,10 @@ module.exports = {
testEnvironment: 'jsdom',
transform: {
'^.+\\.vue$': 'vue3-jest',
+ // Jest doesn't handle non JavaScript assets by default.
+ // https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-unit-jest/presets/default/jest-preset.js#L19
+ '.+\\.(css|styl|less|sass|scss|jpg|jpeg|png|svg|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|avif)$':
+ require.resolve('jest-transform-stub'),
},
moduleFileExtensions: ['json', 'js', 'jsx', 'ts', 'tsx', 'vue'],
moduleNameMapper: {
进入全屏模式 退出全屏模式
- 重新运行 Jest。
$ npm 运行测试
> vite-vue-typescript-starter@0.0.0 测试
> 是
通过测试/单元/HelloWorld.spec.ts
通过测试/单元/App.spec.ts
------|---------|----------|---------|- --------|--------------------
文件 | % 语句 | % 分支 | % 功能 | % 行 |未覆盖线#s
------|---------|----------|---------|- --------|--------------------
所有文件 | 100 | 100 | 100 | 100 |
源代码 | 100 | 100 | 100 | 100 |
应用程序.vue | 100 | 100 | 100 | 100 |
源/组件 | 100 | 100 | 100 | 100 |
HelloWorld.vue | 100 | 100 | 100 | 100 |
------|---------|----------|---------|- --------|--------------------
测试套件:2 个通过,共 2 个
测试:2 次通过,共 2 次
快照:共 0 个
时间:5.805 秒
运行所有测试套件。
2.git add -u && git add tests/
3.git commit -m 'add tests/unit/App.spec.ts and install jest-transform-stub'
链接
-
https://jestjs.io/docs/configuration#collectcoverage-boolean
-
https://jestjs.io/docs/configuration#collectcoveragefrom-array
-
https://github.com/imomaliev/vue-ts
-
https://jestjs.io/docs/configuration#coveragedirectory-string
-
https://github.com/github/gitignore/blob/master/Node.gitignore
-
https://github.com/github/gitignore/
-
https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-unit-jest/presets/default/jest-preset.js
项目
imomaliev/[vue-ts-tailwind
Vite + Vue + TypeScript + TailwindCSS 模板
Vue社区为您提供最前沿的新闻资讯和知识内容
更多推荐
0
0- 0
已为社区贡献21233条内容
所有评论(0)