Vite
首先使用Vite可以快速创建一个基本的Vue项目。
创建项目
首先看下Vite文档,根据文档我们可以通过以下命令创建我们的初始模板:
# npm 6.x
npm create vite@latest my-vue-app --template vue
# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue
# yarn
yarn create vite my-vue-app --template vue
# pnpm
pnpm create vite my-vue-app --template vue
Vite提供了很多模板,因为我们使用TS,所以选用vue-ts模板,然后用pnpm来管理我们的npm包。
创建项目:
pnpm create vite my-vue-app --template vue-ts
如果没有安装pnpm,先全局安装pnpm:
npm i pnpm -g
运行项目
项目创建好之后我们安装依赖然后运行项目。
// 安装依赖
pnpm install
// 本地运行
pnpm dev
启动后可以看到下面这个页面:
![](https://i-blog.csdnimg.cn/blog_migrate/1faf04a152d07604526ab075060fa429.png)
scripts脚本
Vite帮我们创建的项目有以下三个脚本
"scripts": {"dev": "vite","build": "vue-tsc && vite build","preview": "vite preview"},
其中dev是运行本地开发环境,build是编译开发环境需要的资源,preview是预览我们build出来的资源。
集成Vitest
Vitest是一个由 Vite 提供支持的极速单元测试框架,与Vite完全兼容,可以和Vite共享配置文件。
首先我们安装Vitest
pnpm install vitest -D
然后我们在根目录下创建一个目录tests,在tests下创建一个文件index.spec.ts,在该文件下编写我们的单元测试,如下:
// index.spec.ts
import { test, expect } from "vitest";
test("First test", () => {expect(1 + 1).toBe(2);
});
和jest不同,vitest的test和expect默认不支持全局引用,需要在模块里自己引入,然后我们再在package.json里配置测试脚本:
"scripts": {"test": "vitest"},
这时候我们在命令行执行pnpm test
就会执行我们的测试用例,Vite会自动找到项目里面以test.ts或者spec.ts结尾的文件作为测试文件,然后执行它们。
比如我们把index.spec.ts文件改名为index.speccc.ts,然后再执行pnpm test,这时候控制台会输出以下错误:
![](https://i-blog.csdnimg.cn/blog_migrate/f173b50a2d51079bd9f7cbe39e1f479b.png)
告诉我们没找到要测试的文件,并且告诉我们测试文件需要符合对应的命名格式。
Vitest监听模式
Vitest默认是以监听模式启动的,在我们执行pnpm test的时候,测试启动的服务是不会退出的,它会监听我们的代码改变,如果改变了会重新执行测试程序,如果不想以监听的模式启动,只想执行单次测试,那么只需要把"test": "vitest"
改为"test": "vitest run"
,更多配置可查看vite文档。
Vitest测试ts模块
在使用jest测试ts文件的时候,我们需要做很多的配置来支持,使用vitest不需要做任何的配置,默认支持ts。
比如我们写了一个sum.ts文件:
// sum.ts
function sum(...numbs: number[]): number {const result = numbs.reduce((pre, current) => {return pre + current;});return result;
}
export { sum };
测试文件可以直接引用这个模块进行测试:
// index.spec.ts
import { test, expect } from "vitest";
import { sum } from "../src/utils/sum";
test("First test", () => {expect(1 + 1).toBe(2);
});
test("Sum function test", () => {expect(sum(1, 2, 3)).toBe(6);
});
执行pnpm test后可以看到测试被正确执行。
Vitest测试vue模块
在tests目录下新建一个hello.spec.ts文件,输入内容如下:
import Hello from "../src/components/HelloWorld.vue";
我们会发现有个报错:
![](https://i-blog.csdnimg.cn/blog_migrate/ece80d463a660849f9bbcad1f7f1bce0.png)
这时候我们需要将tests目录下的文件加到ts的检测目录里,需要在tsconfig.json里进行如下配置:
"include": ["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue","tests/**/*.ts" // 这一行是新增加的配置],
我们在hello.spec.ts里输入以下内容:
import Hello from "../src/components/HelloWorld.vue";
import { test, expect } from "vitest";
test("Test Hello.vue", () => {console.log(Hello);
});
然后执行pnpm test
,是可以正确执行测试的,这说明vitest可以直接支持对Vue单文件的解析,可以实现对Vue文件的解析是因为vitest可以共用vite的配置,我们使用vite创建的项目vite.config.ts如下:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()]
})
vitest默认也使用这个配置,而这个配置里有个@vitejs/plugin-vue
插件是可以支持对vue文件的解析的,所以vitest默认可以共享vite的配置及其相关功能。
Vitest配置
官方文档vitest配置
如果我们想要对Vitest做一些配置,比如我们想要像Jest一样,支持在全局使用test和expect,也就是说在我们的测试文件里不需要import { test, expect } from "vitest";
就可以使用test和expect方法,这个时候可以通过配置来支持这个功能。
简单的方式我们可以直接在vite.config.ts里做配置,配置如下:
/// <reference types="vitest" />
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({test: {globals: true, },plugins: [vue()],
});
其中新增的代码是
/// <reference types="vitest" />
和
test: {globals: true, },
其中第一行三斜线指令是引入vitest相关的类型配置,那么我们在下面新增test属性的时候就不会报错。
Vitest相关的配置需要添加在test属性里,这里我们添加了globals: true
表示支持全局使用test、expect等方法。
如果我们不想把Vitest相关的配置写在vite.config.ts里,也可以单独写一个配置文件命名为vitest.config.ts,那么vitest会使用这个文件作为配置文件而忽略vite.config.ts。这个时候需要注意vite相关的配置也需要包含在vitest.config.ts这个文件里,比如plugins: [vue()]
,因为vitest可能也需要对vue文件进行解析,具体如何配置可以看这个文档。
然后这个时候我们去掉测试文件里的import { test, expect } from "vitest";
,发现还是报错了,提示找不到test方法:
![](https://i-blog.csdnimg.cn/blog_migrate/8a87924ef068f410477e2afa6e1e9299.png)
这个时候我们还需要告诉编译器这个test是一个全局方法,可以直接使用,我们需要配置下tsconfig.ts,在tsconfig.ts里增加types选项,输入如下内容:
{"compilerOptions": {"types": ["vitest/globals"] // 这是新增的内容}
}
然后我们看下vitest下有一个global.d.ts文件,里面的内容如下:
declare global {const suite: typeof import('vitest')['suite']const test: typeof import('vitest')['test']const describe: typeof import('vitest')['descr