Jest: SyntaxError: Unexpected token { after upgrade to babel-jest v24.8

[bryan-gilbert]

🐛 Bug Report

I've seen many similar reports (e.g. #6229 #2920) but I've not seen any with the solution I found.

    /proot/atest/tests/unit/example.spec.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { shallowMount } from '@vue/test-utils';
                                                                                                    ^

    SyntaxError: Unexpected token {

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

To Reproduce

Create a new Vue client project. Verify that unit tests work. Currently vue_cli installs babel-jest v23.6.0
Upgrade to babel-jest 24.8.0. Verify that unit tests no longer work ( you get the error above)

NOTE that attempts to downgrade to 23.6.0 will NOT work unless you

1. rm -rf node_modules
2. rm package-lock.json
3. npm install

After these steps the unit testing begins to work again.

Expected behavior

I expect unit tests to work after upgrading babel-jest

Run npx envinfo --preset jest

Paste the results here:

npx: installed 1 in 1.29s

  System:
    OS: macOS 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
  Binaries:
    Node: 10.8.0 - /usr/local/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm

[bryan-gilbert]

I also just discovered that Jest keeps a cache so I thought I'd try to clear that and see what happened.

node node_modules/jest/bin/jest --clearCache

Rerun unit tests and the errors persist

[morficus]

Just ran in to the same problem after updating babel-jest to 24.8

in order to get stuff working after downgrading babel-jest, I just had to reset my package-lock.json to the last version (assuming your using git). No need to delete it.

[morficus]

@bryan-gilbert are you using @vue/cli-plugin-unit-jest by any chance?

[mousedownmike]

I have a set of repositories that reproduce this same error when using @angular-builders/jest by @just-jeb. That builder in turn leverages the jest-preset-angular by @thymikee.

https://github.com/mousedownmike/jest-demo-app
Running ng test after cloning and running npm install will generate the error. More details in this issue

I have tried setting the jest dependency to < 24.x.x but that fails as well.

[thymikee]

@mousedownmike isn't ng test running jasmine or other test runner shipping with Angular? You should be running yarn jest or npx jest.

[thymikee]

@bryan-gilbert you need to add @vue/test-utils to the transformIgnorePatterns: https://jestjs.io/docs/en/tutorial-react-native#transformignorepatterns-customization

[mousedownmike]

@mousedownmike isn't ng test running jasmine or other test runner shipping with Angular? You should be running yarn jest or npx jest.

@thymikee ng test is configured to use angular-builders/jest which replaces jasmine/karma to use the jest-preset-angular.

I've confirmed that I get the same error if I simply run npx jest.

[jonathanconway]

I had this issue when trying to unit-test a Gatsby project. Solved it by deleting my babel.config file and instead creating a jest-preprocess.js file which references the babel config.

[aperkaz]

Hi @jonathanconway ,
Could you post an example of your jest-preprocess.js file? I am facing the same issue...