three.jsを使ったJestのテストがうまくいかない
gatosyocora opened this issue · comments
gatosyocora commented
npm test
を実行すると以下のようなエラーで止まる
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:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
• 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:
D:\prog\vrm-avatar-editor\node_modules\three\examples\jsm\loaders\GLTFLoader.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import {
^
SyntaxError: Unexpected token {
3 |
4 | import * as THREE from 'three';
> 5 | import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
| ^
6 | import { VRM } from '@pixiv/three-vrm';
7 |
8 | describe('ModelInfoView.vue', () => {
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (tests/ModelInfoView.test.ts:5:1)
package.json
{
"name": "vrm-avatar-editor",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"deploy": "gh-pages -d docs",
"test": "jest",
"format": "prettier --write src/**/*.{js,vue,ts}",
"lint": "eslint --fix src"
},
"dependencies": {
"@pixiv/three-vrm": "^0.5.6",
"core-js": "^3.6.5",
"three": "^0.124.0",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^8.4.2",
"vue-router": "^3.2.0",
"vuetify": "^2.2.11",
"vuex": "^3.4.0"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/preset-env": "^7.12.16",
"@types/jest": "^26.0.20",
"@typescript-eslint/eslint-plugin": "^4.15.1",
"@typescript-eslint/parser": "^4.15.1",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/test-utils": "^1.1.3",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^26.6.3",
"eslint": "^7.20.0",
"eslint-config-prettier": "^7.2.0",
"eslint-plugin-vue": "^7.6.0",
"gh-pages": "^3.1.0",
"jest": "^26.6.3",
"prettier": "^2.2.1",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"ts-jest": "^26.5.1",
"typescript": "~3.9.3",
"vue-cli-plugin-vuetify": "~2.0.9",
"vue-jest": "^3.0.7",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.3.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
jest.config.js
module.exports = {
verbose: true,
moduleFileExtensions: [
"js",
"ts",
"json",
"vue"
],
moduleNameMapper: {
"^@/(.+)": "<rootDir>/src/$1"
},
transform: {
".*\\.(vue)$": "vue-jest",
"^.+\\.ts$": "ts-jest",
"^.+\\.js$": "babel-jest"
},
globals: {
"ts-jest": {
"tsconfig": "tsconfig.json"
}
},
testURL: "http://localhost",
testMatch: [
"**/tests/**/*.test.ts"
]
}
babel.config.js
module.exports = {
presets: [
['@babel/preset-env', {targets: {node: 'current'}}],
]
}
gatosyocora commented
jest.config.jsとbabel.config.jsを一部変更するといけた
cdd7fb6