需要如下库支持
依赖说明以及相关文档
注意: 如果未安装 @babel/preset-env 和配置 babel.config.js 那么大概率会出现报错
由于 Jest 运行在 Node 环境 中,所以并不支持 import
这个来自 ESM 的关键字,所以就需要 @babel/preset-env ,文档 jest/using-babel
仅有依赖关系的话,那么就可以一次就安装完它们
npm install --save-dev @babel/core @babel/preset-env @types/jest @testing-library/jest-dom @vue/test-utils@next vue-jest@next babel-jest ts-jest jest
复制代码
注意添加 babel.config.js 文件并写入如下内容
module.exports = {
presets: ["@babel/preset-env"],
};
复制代码
jest 部分也比较简单,可以使用 npx 初始化
npx jest --init
复制代码
也可以在 package.json 的 script
里添加命令再执行 npm run jest:init
"scripts": {
"jest:init": "jest --init"
}
复制代码
还可以手动创建 jest.config.js 文件,添加如下内容
module.exports = {
coverageProvider: "v8",
globals: {
"vue-jest": {
babelConfig: false,
tsConfig: {
importHelpers: true,
},
},
},
moduleFileExtensions: ["js", "json", "jsx", "ts", "tsx", "node", "vue"],
transform: {
"^.+\\.vue$": "vue-jest",
"^.+\\.ts$": "ts-jest",
"^.+\\.js$": "babel-jest",
"^.+\\.[jt]sx?$": "babel-jest"
},
};
复制代码
完成以上步骤之后就可以在 package.json 添加 jest 运行命令了
"scripts": {
"jest:unit": "jest"
}
复制代码
项目根目录下创建如下文件夹结构
test
└─ unit
├─ specs
└─ use-cases
复制代码
新建 test/unit/specs/hello.spec.js 文件并写入如下内容
import { mount } from '@vue/test-utils'
// The component to test
const MessageComponent = {
template: '<p>{{ msg }}</p>',
props: ['msg']
}
test('displays message', () => {
const wrapper = mount(MessageComponent, {
props: {
msg: 'Hello world'
}
})
// Assert the rendered text of the component
expect(wrapper.text()).toContain('Hello world')
})
复制代码
执行如下命令,如无意外将会得到测试结果
npm run jest:unit
复制代码
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。