JP Sauve (1) [Avatar] Offline
#1
I've been following the book with my own beginning codebase, and hit a few errors while trying to inspect my code with the Chrome debugger. I've got two test files, both pass when not using debugger. I expect that the script will resume up until the "debugger" statement in my code, but the errors I get, after clicking "resume script execution", are as follows:

Debugger attached.
 FAIL  tests/unit/ParentComponent.spec.js
  ? Test suite failed to run

    /Users/username/Workspace/newproject/js-src/modal/tests/unit/ParentComponent.spec.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import "core-js/modules/es6.array.iterator";
                                                                                                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    SyntaxError: Unexpected string

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

 FAIL  tests/unit/App.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:

    /Users/username/Workspace/newproject/js-src/modal/tests/unit/App.spec.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { shallowMount, createLocalVue } from '@vue/test-utils';
                                                                                                    ^

    SyntaxError: Unexpected token {

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

Test Suites: 2 failed, 2 total
Tests:       0 total
Snapshots:   0 total
Time:        2.545s
Ran all test suites.
Waiting for the debugger to disconnect...


I got long lists of errors from having the code coverage tool enabled in Jest.config.js, but I've left those out since they are irrelevant, and disappear when I disable those tests.
Edd Yerburgh (37) [Avatar] Offline
#2
Sorry about this. Could you post the full repository for me to debug?
589525 (1) [Avatar] Offline
#3
Hi Edd, this issue is easily reproduced by creating a project using the vue cli create command. If you add "test:unit:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --no-cache --runInBand" to package.json and follow the chrome debug steps, this reproduces the error with the Helloworld test. Incidentally, if you change the test:unit to use jest instead of vue-cli-service test:unit, you'll see the same issue.

I hope this helps.

Thanks,

Gav
Edd Yerburgh (37) [Avatar] Offline
#4
The issue is that the import isn't being compiled by babel.

Vue CLI uses environment variables to configure if it should compile modules. You can either add these as env vars:

test:unit:debug": "VUE_CLI_BABEL_TRANSPILE_MODULES=true VUE_CLI_BABEL_TARGET_NODE=node  node --inspect-brk ./node_modules/jest/bin/jest.js --no-cache --runInBand"


Or set them in the babel config file, like this https://github.com/eddyerburgh/ask-a-question-app/blob/master/babel.config.js