我一直在尝试配置jest.config.js文件,以便在用TypeScript编写的Vuejs应用上运行一些测试。 Jest不断给出一个错误,指出它在解析node_modules中的json文件时遇到了意外的令牌。不知道问题出在哪里,因为当我尝试导入纯JavaScript的vue文件时,效果很好。以下是玩笑引发的错误
Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
SyntaxError: Unexpected token ] in JSON at position 774
at JSON.parse (<anonymous>)
at parse (node_modules/tsconfig/src/tsconfig.ts:195:15)
at readFileSync (node_modules/tsconfig/src/tsconfig.ts:181:10)
at Object.loadSync (node_modules/tsconfig/src/tsconfig.ts:151:18)
at find (node_modules/vue-jest/lib/load-typescript-config.js:33:39)
at loadTypescriptConfig (node_modules/vue-jest/lib/load-typescript-config.js:73:26)
at compileTypescript (node_modules/vue-jest/lib/compilers/typescript-compiler.js:9:20)
at processScript (node_modules/vue-jest/lib/process.js:23:12)
at Object.module.exports [as process] (node_modules/vue-jest/lib/process.js:42:18)
at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:453:35)
这是我的jest.config.js文件
module.exports = {
preset: 'ts-jest',
transform: {
'^.+\\.js$': '<rootDir>/node_modules/babel-jest',
'.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
'^.+\\.tsx?$': '<rootDir>/node_modules/ts-jest',
'.+\\.json': '<rootDir>/node_modules/json5-jest',
'^.+\\.json5$': 'json5-jest',
},
testEnvironment: 'jsdom',
moduleFileExtensions: ['ts', 'js', 'json', 'node', 'jsx', 'tsx', 'vue'],
moduleDirectories: ['node_modules', 'src'],
testMatch: [
'**/__tests__/**/*.+(ts|tsx|js)',
'**/?(*.)+(spec|test).+(ts|tsx|js)',
],
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1',
'^vue$': 'vue/dist/vue.common.js',
},
transformIgnorePatterns: [
'<rootDir>/node_modules/',
'<rootDir>/node_modules/(?!(@jest)/)',
'<rootDir>/node_modules/(?!(@vue-jest)/.*)',
'<rootDir>/node_modules/(?!tsconfig/.*)',
'<rootDir>/node_modules/(?!vue-jest/.*)',
'<rootDir>/node_modules/(?!@jest/.*)',
],
testURL: 'http://localhost/',
}
这也是我尝试导入的vue文件之一:
<template>
<tr>
<td class="link">{{ originalUrl }}</td>
<td class="link">{{ shortUrl }}
<button class="copy-clipboard" @click="handleCopyClipboard">Copy</button>
</td>
<td>
<button class="delete-one" @click="handleDeleteUrl">Delete</button>
</td>
</tr>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend ({
props: {
shortUrl: {
type: String,
required: true
},
id: {
type: String,
required: true
},
originalUrl: {
type: String,
required: true
},
shortUrlHash: {
type: String,
required: true
},
handleDelete: {
type: Function,
required: true
}
},
name: 'Url' as string,
data: () => ({}),
methods: {
handleDeleteUrl() : void {
this.handleDelete(this.id)
},
handleCopyClipboard() : void {
navigator.clipboard.writeText(this.shortUrl)
alert('copied to clipboard')
}
}
})
</script>
<style scoped>
.copy-clipboard {
display: inline-block;
background: green;
color: white;
height: 32px;
margin-left: 10px;
width: 60px;
font-weight: bold;
text-transform: uppercase;
border-radius: 5px;
border: 0;
box-shadow: none;
cursor: pointer;
}
.delete-one {
height: 32px;
background: #dc3545;
color: white;
font-weight: bold;
text-transform: uppercase;
border-radius: 5px;
border: 0;
box-shadow: none;
text-align: center;
cursor: pointer;
}
button:hover {
background: #556476;
}
.link {
color: blue;
cursor: pointer;
text-decoration: underline;
}
@media only screen and (max-width: 540px) {
.copy-clipboard {
display: none;
}
.delete-one {
display: none;
}
}
</style>
答案 0 :(得分:1)
错误调用堆栈意味着在转换<script lang="ts">
块时解析TypeScript配置时,这会在Vue加载程序中发生。
这很可能是.json文件中的实际语法错误。不幸的是,没有提到文件位置,这需要调试。由于这种情况发生在TypeScript初始化时,因此问题出在tsconfig.json或关联文件中。
.json不需要单独的json5-jest
转换器,它可以由TypeScript和Babel处理,并且提供带有.json扩展名的JSON5将会是一个错误,这会导致类似这样的问题。