vite学习详解( 五 ) _vue

首先，因为这个包是在src外的，所以我们需要在.json文件中将他了导入文件才能正常。
{"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "__tests__/**/*.ts"],}
然后我们直接进入vite..ts中配置下。
/// import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'// import './server.js'export default defineConfig({resolve: {alias: {'@/': 'src/','@views/': 'src/views/','@router/': 'src/router/','@store/': 'src/store/',}},test: {environment: 'jsdom',globals: true},plugins: [vue()],server: {port: 7777,},})
这里需要注意几点，如果你是在vite..ts文件中配置的，你需要在文件头配置/// 通知vite这里有配置test 。当然你也可以重开一个..ts,然后把这个vite..ts注释掉，将里面的配置迁移到..ts中。当然你还可以使用将这两个配置文件中的配置合并，这里就不多说了。
:jsdom表示我们是在浏览器环境，需要测试dom 。
：如果是true你就可以在全局都有的代码提示了。如果设置了true别忘了通知ts,回到.node.json中配置types 。
{"compilerOptions": {"composite": true,"module": "ESNext","moduleResolution": "Node","allowSyntheticDefaultImports": true,"types": ["vitest/globals"]},"include": ["vite.config.ts"]}
然后我们再来安装下我们测试需要的包jsdom[40]和@vue/test-utils[41] 。
npm install jsdom @vue/test-utils -D
然后我们进入/.spec.ts中
import { describe, it, expect } from 'vitest';import { mount } from '@vue/test-utils'import A from '../src/views/A.vue';describe('test-component-a-grow-up', () => {it('test-a-click', () => {const wrapper = mount(A, {});// 找到按钮并让他加一岁const btn = wrapper.get('.btn');btn.trigger('click');expect(wrapper.get('.age').text()).contain('25');})})
最后让我们去到.json文件中新增一个:"test": ""
然后终端执行npm run test
然而直接报错了。
test-run-error
为什么呢，因为这个时候pinia没创建实例，这又是为什么呢？因为项目没有跑起来。。。
那么怎么办呢？那只能是将main.ts也跑了。。另外还发现一个问题，就是点击事件需要异步处理。
import { describe, it, expect } from 'vitest';import { mount } from '@vue/test-utils'import '../src/main';import A from '../src/views/A.vue';describe('test-component-a-grow-up', () => {it('test-a-click', async () => {const wrapper = mount(A, {});// 找到按钮并让他加一岁const btn = wrapper.get('.btn');await btn.trigger('click');expect(wrapper.get('.age').text()).contain('26');})})
这回重新跑npm run test
test-img
成功啦~，age成功变成25了。
[42]
我们来搞个自己的插件玩下。
vite的接口是基于[43]的接口,然后加了一些自己的东西。
我们先在根目录新建一个的文件夹，然后新建vite--vue-test.ts 。这里需要注意vite的的文件名是一定要vite--*[44]的，如果你的是只想用于某个框架，那就得是vite--vue/react-*这样。当然你可以写的插件，命名和的规范一致。
先来看下编写规范，和的其实是一样的。
export default function myPlugin(options = {}) {return {name: 'my-plugin', // required, will show up in warnings and errorsresolveId(id) {//...},load(id) {//...}}}
首先你得是一个函数并且默认导出。你这个函数需要返回一个name字段，这是必须的，用来标识你的。、load都是vite抛出的hook,你可以监听他们，然后返回数据来改变某些东西。