我需要一个vue3+vite+test单元测试的例子
时间: 2023-09-03 14:06:51 浏览: 100
vue3+vite+ts环境搭建步骤
5星 · 资源好评率100%
非常好的问题!以下是一个简单的 Vue3 + Vite + Jest 单元测试的例子:
首先,安装所需的依赖项:
```
npm install --save-dev @vue/test-utils jest vue-jest babel-jest @babel/core @babel/preset-env
```
然后,在项目根目录下创建一个 `.babelrc` 文件,并添加以下内容:
```
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
]
}
```
接下来,在项目根目录下创建一个 `jest.config.js` 文件,并添加以下内容:
```
module.exports = {
preset: '@vue/cli-plugin-unit-jest',
transform: {
'^.+\\.vue$': 'vue-jest',
'^.+\\.js$': 'babel-jest'
}
}
```
然后,在 `package.json` 文件中添加以下命令:
```
"test": "jest"
```
最后,创建一个简单的 Vue 组件,并在 `__tests__` 文件夹中创建一个同名的测试文件,例如:
`HelloWorld.vue`:
```
<template>
<div>Hello, {{ name }}!</div>
</template>
<script>
export default {
props: {
name: String
}
}
</script>
```
`HelloWorld.spec.js`:
```
import { mount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'
describe('HelloWorld.vue', () => {
it('renders props.name when passed', () => {
const name = 'World'
const wrapper = mount(HelloWorld, {
props: { name }
})
expect(wrapper.text()).toMatch(`Hello, ${name}!`)
})
})
```
运行 `npm test` 命令,即可运行测试。希望这个例子能对你有所帮助!
阅读全文