반응형
Jest + Vue - SyntaxError:예기치 않은 토큰 <
ts-Jest/Jeest 및 Chai를 사용하여 TypeScript로 작성된 Electron + Vue2 어플리케이션에 테스트를 추가하려고 합니다.그러나 Jest가 올바르게 동작하고 있는지 확인하기 위해 작성한 간단한 테스트를 실행하려고 하면 에러에서 볼 수 있듯이 테스트 중인 컴포넌트의 템플릿을 Import하고 있다는 사실이 마음에 들지 않는 것 같습니다.이것과 관련된 것을 검색하려고 하면, 별로 운이 없고, 「뜻밖의 토큰 Import」를 지적하는 경우가 많아, 이미 수정이 끝난 상태입니다.
HTML의 Import에 당황하지 않도록 테스트 방법을 알고 있는 사람이 있다면, 그것은 매우 좋을 것입니다.왜냐하면 저는 당황하고 문서에는 도움이 될 만한 내용이 없기 때문입니다.
오류:
$ npm run test
> app@1.0.0 test C:\Users\daniel\Desktop\app\app
> jest --detectOpenHandles
FAIL src/app/features/app-window/app-window.component.spec.ts
● 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:
C:\Users\daniel\Desktop\app\app\src\app\features\app-application-content\app-application-content.component.html:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<webview-component v-if="src"
^
SyntaxError: Unexpected token <
2 | import Component from 'vue-class-component'
3 | import { Prop, Watch } from 'vue-property-decorator'
> 4 | import Template from './app-application-content.component.html'
| ^
5 |
6 | import * as qs from 'qs'
7 | import { INameValue } from '../../../contracts/Core'
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
at Object.<anonymous> (src/app/features/app-application-content/app-application-content.component.ts:4:1)
at Object.<anonymous> (src/app/features/app-content/app-content.component.ts:9:1)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 12.924s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! app@1.0.0 test: `jest --detectOpenHandles`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the app@1.0.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\daniel\AppData\Roaming\npm-cache\_logs\2018-11-21T14_25_23_427Z-debug.log
jest.config.displays
module.exports = {
preset: 'ts-jest/presets/js-with-ts',
testEnvironment: 'node',
verbose: true,
moduleDirectories: ['node_modules', 'src'],
modulePaths: ['<rootDir>/src', '<rootDir>/node_modules'],
moduleFileExtensions: ['js', 'ts', 'json', 'node'],
transformIgnorePatterns: ['node_modules/(?!(bootstrap-vue)/)'],
testPathIgnorePatterns: [
'/build/',
'/config/',
'/data/',
'/dist/',
'/node_modules/',
'/test/',
'/vendor/'
],
globals: {
'ts-jest': {
tsConfig: './src/app/tsconfig.json'
},
NODE_ENV: 'test'
}
}
tsconfig.json
{
"compilerOptions": {
"allowJs": true,
"outDir": "./built/",
"sourceMap": true,
"strict": true,
"moduleResolution": "node",
"target": "ES2017",
"experimentalDecorators": true,
"noImplicitAny": false,
"emitDecoratorMetadata": true,
"allowSyntheticDefaultImports": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"esModuleInterop": true,
"lib": ["es2017", "dom"],
"include": [
"**/*",
"../types/**/*",
"../../node_modules/bootstrap-vue/**/*",
"../../node_modules/electron/**/*"
]
}
}
app-backets.component.spec.ts의
import { expect } from 'chai'
import 'jest'
import { appWindowComponent } from './app-window.component'
const appWindowComponent = new appWindowComponent()
describe('Test: Set Title Function', () => {
it('should set the variable title to the passed variable', () => {
const title = 'this is a test'
appWindowComponent.setTitle(title)
expect(appWindowComponent.title).to.equal(title)
})
})
새로운 jeast.config.js
module.exports = {
preset: 'ts-jest/presets/js-with-ts',
testEnvironment: 'node',
verbose: true,
moduleDirectories: ['node_modules', 'src'],
modulePaths: ['<rootDir>/src', '<rootDir>/node_modules'],
moduleFileExtensions: ['js', 'ts', 'json', 'node', 'html'],
transform: {
'^.+\\.html$': '<rootDir>/config/htmlLoader.js'
},
transformIgnorePatterns: ['node_modules/(?!(bootstrap-vue)/)'],
testPathIgnorePatterns: [
'/build/',
'/config/',
'/data/',
'/dist/',
'/node_modules/',
'/test/',
'/vendor/'
],
globals: {
'ts-jest': {
tsConfig: './src/app/tsconfig.json'
},
NODE_ENV: 'test'
}
}
메모
transform: {
'^.+\\.html$': '<rootDir>/config/htmlLoader.js'
},
moduleFileExtensions: ['js', 'ts', 'json', 'node', 'html'],
Html Loader 파일
const htmlLoader = require('html-loader')
module.exports = {
process(src, filename, config, options) {
return htmlLoader(src)
}
}
새로운 에러가 발생하고 있기 때문에, 이 조작은 정상적으로 동작하고 있는 것 같습니다.
다음은 보다 최신 솔루션입니다.
vue-module(https://github.com/vuejs/vue-jest)을 설치해야 합니다.
npm install -D @vue/vue3-jest
다음은 사용 가능한 버전과 대응하는 vue 및 joke 버전입니다.
| Vue 버전 | Jest 버전 | 패키지 |
|---|---|---|
| Vue 2 | 농담 <= 26 | vue-timeout@4 |
| Vue 3 | 농담 <= 26 | vue-timeout@5 |
| Vue 2 | 제이스트 27 | @vue/vue2-module |
| Vue 3 | 제이스트 27 | @vue/vue3-module |
그런 다음 농담 설정을 업데이트하면 됩니다.jest.config.ts예를 들어)를 추가하고,transform section
"transform": {
"^.+\\.vue$": "@vue/vue3-jest"
}
경고: 적절한 vue-jest 패키지를 사용하여npm install명령어 및 명령어jest.config.ts!
언급URL : https://stackoverflow.com/questions/53415363/jest-vue-syntaxerror-unexpected-token
반응형
'programing' 카테고리의 다른 글
| 구조물 또는 유니언의 'unsigned temp:3'은 무엇을 의미합니까? (0) | 2022.07.17 |
|---|---|
| vuex 저장소에 데이터의 json을 로드하고 구성 요소에 액세스 (0) | 2022.07.17 |
| 포인터를 사용하여 단일 연결 목록에서 항목 제거 (0) | 2022.07.17 |
| 기능 선언을 위한 대체(K&R) C 구문과 프로토타입 (0) | 2022.07.17 |
| C/C++ 단위의 결합 크기 (0) | 2022.07.17 |