无法在基于 jest 和 vue-test-utils 的测试项目中使用 vue.js 的 ES6 模块
Posted
技术标签:
【中文标题】无法在基于 jest 和 vue-test-utils 的测试项目中使用 vue.js 的 ES6 模块【英文标题】:Cannot use ES6 module of vue.js in test project based on jest and vue-test-utils 【发布时间】:2020-08-06 22:49:33 【问题描述】:下午好。我需要测试基于 .vue 组件的 vue.js 接口。带有 UI 的项目本身与带有测试的项目是分开的,它是用 Typescript 编写的,以及带有测试的项目。
webpack 配置使用 vue/dist/vue.esm.js 模块,它允许我使用 Vue.extend、Vue.use 方法等。
测试项目是在 vue-test-utils 和 jest 的组合上配置的,当我尝试使用相同的 vue 导入时,我收到类似的错误
export default Vue;
^^^^^^
SyntaxError: Unexpected token 'export'
进口情况也是如此。
这是一个简单的 typescript 基础组件示例:
<template>
<div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend(
data: () => (
...
)
)
</script>
下面是一个简单测试的例子:
import mount from '@vue/test-utils'
import Example from '@components/Example.vue';
describe('example', () =>
it('should be rendered', () =>
const wrapper = mount(Example);
expect(wrapper.isVueInstance()).toBeTruthy();
)
)
在测试执行时,我收到消息,你以前见过:
path\to\my\project\node_modules\vue\dist\vue.esm.js:11993
export default Vue;
^^^^^^
SyntaxError: Unexpected token 'export'
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1085:14)
at Object.<anonymous> (node_modules/@vue/test-utils/dist/vue-test-utils.js:7:27)
tsconfig.json
"compilerOptions":
"sourceMap": true,
"noImplicitAny": false,
"module": "commonjs",
"target": "es6",
"baseUrl": ".",
"allowJs": true,
"lib": [
"es2015",
"es2017",
"dom",
"es2018.promise"
],
"paths":
"@components/*": ["../path/to/Components/*"],
"vue$": ["vue/dist/vue.esm.js"]
,
"removeComments": true
,
"compileOnSave": false,
"exclude": [ "node_modules" ]
jest.config.js:
module.exports =
verbose: true,
testRegex: ".+[.]test[.](ts|js)$",
moduleNameMapper:
"^@components/(.*)$": "<rootDir>/../path/to/Components/$1",
"vue$": 'vue/dist/vue.esm.js'
,
moduleFileExtensions: [
"ts", "js", "json", "vue"
],
transform:
"^.+\\tsx?$": "ts-jest",
"^.+\\.jsx?$": "babel-jest",
"^.+\\.js$": "babel-jest",
".*\\.(vue)$": "vue-jest"
,
preset: 'ts-jest/presets/js-with-ts',
transformIgnorePatterns: [
'node_modules/(?!(@babel)/)',
"/node_modules/(?!(bootstrap-vue)/)",
"/node_modules/(?!vue)"
],
testURL: "http://localhost/"
主 ui 项目中 webpack.config.js 的一部分:
module:
rules: [
test: /\.vue$/,
loader: 'vue-loader'
,
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
loader: 'babel-loader' ,
loader: 'ts-loader', options: appendTsSuffixTo: [/\.vue$/] ,
]
,
test: /\.js$/,
exclude: /node_modules/,
loader:"babel-loader"
,
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
,
test: /\.less$/,
use: [
'vue-style-loader',
'css-loader',
'less-loader'
]
]
,
resolve:
extensions: ['.ts', '.js', '.vue'],
alias:
'vue$': 'vue/dist/vue.esm.js',
'@components': path.resolve('path/to/components')
,
plugins: [
new VueLoaderPlugin()
]
这里是添加的 .babelrc:
"presets": [
[
"@babel/preset-env",
"targets":
"browsers": ["> 1%", "last 2 versions", "ie >= 10"]
,
"corejs": 3,
"modules" : "commonjs"
]
]
如果我将 vue/dist/vue.esm.js 更改为 vue/dist/vue.js,我应该将所有 Vue.extend 更改为导出默认 Vue,并将 Vue.use() 更改为 mixins:[Mixin],什么很难测试。 + 我将无法使用“新 Vue”。
有人知道,如何正确地将 ES6 vue npm 模块 (vue.esm.js) 包含到 ts 测试项目中?请
P.S 测试项目中没有 webpack。
【问题讨论】:
【参考方案1】:好的,我通过在 tsconfig 中添加 "allowJs": true
和 "esModuleInterop": true
解决了这个问题
【讨论】:
请记住,Vue.js 在 ES6 中与this
存在问题。以上是关于无法在基于 jest 和 vue-test-utils 的测试项目中使用 vue.js 的 ES6 模块的主要内容,如果未能解决你的问题,请参考以下文章
无法使用 Jest 中的提交按钮触发 Vuetify 表单提交
使用 Jest、Vue、Vuetify 和 Pug 运行单元测试