How I solved issues while setting up Jest and Enzyme

How I solved issues while setting up Jest and Enzyme

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. This article is not for setting up Webpack.

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Performing Unit Testing With React JS Components Using Jest & Enzyme

Learn about unit testing React components using Jest and Enzyme. It helps to improve your React application architecture and maintainability.

Test-Driven Development with React, Jest, and Enzyme - Part 1

In this two part series, we'll look at how to develop a React app using Test-Driven Development (TDD).

Test-Driven Development with React, Jest, and Enzyme - Part 2

In this two part series, we'll look at how to develop a React app using Test-Driven Development (TDD).

How to Build Unit Tests with Jest and Enzyme for React in 2021

Learn how to build unit tests for React using Jest and Enzyme and learn how to reliably test component trees and functions. Unit testing in React in 2021 has come a long way since the early days of the framework. Using Jest and Enzyme, here's how to build unit tests for React and reliably test component trees and functions.