jestを導入しようとして躓いた記録

2019/06/082020/08/05

jest で Vue の単一コンポーネントをテストしようとしたのだけれど、

npm run test

とかやっても、いろいろエラーが出て進まない・・。

結論

.babelrc の設定を完了させてからテストすべしっ。

参考

Jest を使用した単一ファイルコンポーネントのテスト | Vue Test Utils

Vue コンポーネントをテストするためのユーティリティ

 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"
                    }
                }]
            ]
        }
    }
}