The main reason for writing this blog is that I was facing a lot of errors while setting up the testing environment in my React project. It is easier if you are using CRA, but if project is configured using Webpack, it can give you areal headache. I don’t want my fellow developers to go through the same trouble.

Note: This article is not for setting up Webpack, Jest or Enzyme from scratch. For that, I’ll share the links of the awesome articles by other people. This is just to help the developers fix the error that they may face while doing so.

Basically, I encountered two errors which took a lot of time to resolve:

1. Jest encountered an unexpected token

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.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

This error appeared as soon as I ran the tests using Jest.

#enzyme #jest #programming #react #webpack