5

When running my test suite using Jest, I encountered warnings that asked me to update packages:

npm WARN deprecated jest-dom@2.1.1: 🚨 jest-dom has moved to @testing-library/jest-dom. Please uninstall jest-dom and install @testing-library/jest-dom instead, or use an older version of jest-dom. Learn more about this change here: https://github.com/testing-library/dom-testing-library/issues/260 Thanks! :)
npm WARN deprecated react-testing-library@5.9.0: 🚨  react-testing-library has moved to @testing-library/react. Please uninstall react-testing-library and install @testing-library/react instead, or use an older version of react-testing-library. Learn more about this change here: https://github.com/testing-library/dom-testing-library/issues/260 Thanks! :)

In package.json I changed the following

"jest-dom": "^2.1.1",
"react-testing-library": "^5.3.0"

to

"@testing-library/jest-dom": "^5.11.1",
"@testing-library/react": "^10.4.7"

and of course the import statements from

import "jest-dom/extend-expect";

to

import "@testing-library/jest-dom";

etc.

After I removed the old ones and added the new one, I got multiple error that makes my tests fail (only in my Semaphore CI setup, not on my local machine).

FAIL src/redux/actions/tests/myActions.test.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:
    /home/semaphore/my-app/client/node_modules/@testing-library/dom/dist/helpers.js:44
        } catch {// not using Jest's modern fake timers
                ^
    SyntaxError: Unexpected token {
      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.<anonymous> (node_modules/@testing-library/dom/dist/pretty-dom.js:13:16)
      at Object.<anonymous> (node_modules/@testing-library/dom/dist/config.js:11:18)

I am not a frontend developer, so I am happy to hear what more information is needed to facilitate help. Thanks a lot!

1
  • Did you install the new packages which you replaced in package.json. If not, then please do "npm install" again and see if you are getting error or not. Jul 18, 2020 at 12:31

2 Answers 2

9

The error refers to optional catch binding, which is modern JS feature and supported since Node 10. This means that @testing-library/dom package doesn't support older Node versions, this can be confirmed by checking engines section in its package.json.

A preferable solution is to update Node.js because 8 reached the end of life. Alternatively, the package can be downgraded to lower major version or transpiled by white-listing it in transformIgnorePatterns, as the error suggests.

1
  • Updating Node.js was the way to go and actually the difference between my local setup and the CI setup.
    – Steven
    Jul 18, 2020 at 21:48
0

@Estus's answer is absolutely right, and I voted it up. Just wanted to add the actual fix if you are also using Semaphore for your CI, so you don't need to spend more time investigating like I did.

  • Make sure your current node version is at least the latest stable LTS, and that the version you're using locally is the version your tests pass with
  • Generate an .nvmrc file if you don't have one already: node -v > .nvmrc
  • Make sure you call nvm use in every block of your semaphore.yml.

i.e. use an extrapolated for-your-project, version of this: https://github.com/semaphoreci-demos/semaphore-demo-javascript/blob/master/.semaphore/semaphore.yml.

That will ensure your node versions are in sync, and should resolve any "SyntaxError: Unexpected token {" errors you're encountering in CI provided the same tests are passing locally. If you don't specify the node version, Semaphore uses v8.17.0 as the default (https://docs.semaphoreci.com/ci-cd-environment/ubuntu-18.04-image/#javascript-via-node-js)! Hence why anyone who doesn't specify the version will encounter this error when upgrading any Jest libs.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.