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!

Estus Flask
  • 206,104
  • 70
  • 425
  • 565
Steven
  • 1,218
  • 3
  • 18
  • 38
  • 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. – Vardan Gupta Jul 18 '20 at 12:31

2 Answers2

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.

Estus Flask
  • 206,104
  • 70
  • 425
  • 565
  • Updating Node.js was the way to go and actually the difference between my local setup and the CI setup. – Steven Jul 18 '20 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.

colemerrick
  • 1,118
  • 12
  • 17