jestを導入しようとして躓いた記録
jest で Vue の単一コンポーネントをテストしようとしたのだけれど、
npm run test
とかやっても、いろいろエラーが出て進まない・・。
結論
.babelrc の設定を完了させてからテストすべしっ。
参考
https://vue-test-utils.vuejs.org/ja/installation/testing-sin...現象
'bindings’ of null とか SyntaxError: Unexpected token import とか言われちゃう。
>npm run test
@ test D:\・・・（カレントディレクトリ）
jest
FAIL resources/assets/js/test/index.spec.js
● Test suite failed to run
TypeError: Cannot read property 'bindings' of null
at Scope.moveBindingTo (node_modules/@babel/traverse/lib/scope/index.js:867:13)
at BlockScoping.updateScopeInfo (node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:364:17)
at BlockScoping.run (node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:330:12)
at PluginPass.BlockStatementSwitchStatementProgram (node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:70:24)
at newFn (node_modules/@babel/traverse/lib/visitors.js:193:21)
at NodePath._call (node_modules/@babel/traverse/lib/path/context.js:53:20)
at NodePath.call (node_modules/@babel/traverse/lib/path/context.js:40:17)
at NodePath.visit (node_modules/@babel/traverse/lib/path/context.js:88:12)
at TraversalContext.visitQueue (node_modules/@babel/traverse/lib/context.js:118:16)
at TraversalContext.visitSingle (node_modules/@babel/traverse/lib/context.js:90:19)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 22.064s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ test: `jest`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ 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\(ユーザー名)\AppData\Roaming\npm-cache\_logs\2019-02-15T02_27_12_136Z-debug.log
－－－
FAIL resources/assets/js/test/index.spec.js
● 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:
D:\・・・（カレントディレクトリ）\resources\assets\js\test\index.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { shallowMount } from "@vue/test-utils"
^^^^^^
SyntaxError: Unexpected token import
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:440:17)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 17.379s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ test: `jest`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
やったこと
npm のjest関連モジュールをインストールしなおしてみたり、babelのバージョンが6と7で混在してる感じだったので npm uninstall @babel してみたり。（この辺りは多分関係なかった。）
ステータス：解決済み
.babelrc がかなり中途半端な状態（ “preset": [“env"] のみ指定されてた状態）になってた。
以下のように修正したら動きましたとさ。
{
"presets": [
["env", {
"modules": false
}]
],
"env": {
"test": {
"presets": [
["env", {
"targets": {
"node": "current"
}
}]
]
}
}
}