question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Failing to run Jest tests with Vue CLI 3 project

See original GitHub issue

Environment

  1. node -v: v9.4.0
  2. npm -v: 6.3.0
  3. npm ls jest or npm ls react-scripts (if you haven’t ejected):
foo@0.1.0 C:\Foo\Source
`-- @vue/cli-plugin-unit-jest@3.0.0
  `-- jest@23.5.0
  1. your vscode-jest settings if customized:

    • jest.pathToJest? N/A
    • jest.pathToConfig? N/A
    • anything else that you think might be relevant? N/A
  2. Operating system: Windows 10

Prerequisite

  • are you able to run jest test from command line? Yes
  • how do yo run your tests from command line? (for example: npm run test or node_modules/.bin/jest) vue-cli-service test:unit or npx jest

Steps to Reproduce

The VS Code Output window shows lots of errors that look like this:

FAIL src/framework/Guid.Test.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:\Bitbucket\Bridge.Staffing\Source\Client\src\framework\Guid.Test.ts:3
    import "core-js/modules/es6.regexp.constructor";
    ^^^^^^

    SyntaxError: Unexpected token import

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

As indicated in the comment here, I tried setting jest.pathToJest to:

cross-env BABEL_ENV=test vue-cli-service test:unit

However, this doesn’t work, the unexpected token import error continues.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:4
  • Comments:5

github_iconTop GitHub Comments

6reactions
RehanSaeedcommented, Sep 17, 2018

Thanks for that link. Adding this code at the top of jest.config.js fixes the problem:

process.env.VUE_CLI_BABEL_TARGET_NODE = true;
process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true;
0reactions
JFGHTcommented, Dec 20, 2018

Thanks for that link. Adding this code at the top of jest.config.js fixes the problem:

process.env.VUE_CLI_BABEL_TARGET_NODE = true;
process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true;

This actually works. But why does vscode jest extension need these variables and launching jest by command not?

Read more comments on GitHub >

github_iconTop Results From Across the Web

vue.js - Vue3/TS/Jest/testing-ligrary: can not run tests
I create project through vue cli with options: vue3, TS, JEST and add @testing-library/vue . my package.json looks like this
Read more >
Cannot run Jest unit tests with @vue/cli-service : WEB-34734
The test as scaffolded by Vue CLI, works. You know this by running npm run test:unit - you'll see the test passes just...
Read more >
vue/cli-plugin-unit-jest
Note that directly running jest will fail because the Babel preset requires hints to make your code work in Node.js, so you must...
Read more >
Setting up for TDD - Vue Testing Handbook
Create a new project by running vue create [project-name] . Choose "Manually select features" and "Unit Testing", and "Jest" for the test runner ......
Read more >
Vue.js 3 Unit Testing Setup & Basics Tutorial
Lesson Project · Jest is the framework used to perform unit testing. · Vue CLI Unit Jest Plugin installs and configures the necessary...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found