Running Jest when you are importing a file which Jest cannot parse

When you are running jest and encounter the error below, the solution is simple. You need to add transformIgnorePatterns in the jest config. For example, you can simply add this in your package.json.

This is usually caused by using a third party library that uses ES module.

1
2
3
4
5
"jest": {
  "transformIgnorePatterns": [
      "/node_modules/@mdhnpm/(?!react-cube-loading-spinner)"
  ]
},

The patterns are regex for the module path. You can have super long one to ignore different libraries like “/node_modules/(?!@mdhnpm|react-toastify|react-image-crop|@tippyjs|@brainhubeu|tippy.js)”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
● 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:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
• 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
Front-End
TypeScript: type aliases to check type equality

This post is to analyse how the type equality check by using type aliases proposed by Matt Pocock in his twitter post. These type aliases allow us to elegantly express type equality checks in unit tests. All we need to do is to pass the output and expected types in …

Front-End
Fixing it.only type error in Jest

If you are getting a type error with it.only in Jest, it could be due to incorrect TypeScript typings or incompatible versions of Jest and TypeScript. To resolve this issue, you can try the following steps: Make sure you have the latest versions of Jest and its TypeScript typings installed …

Front-End
yup conditional validation example

Here’s an example of a Yup validation logic where the first input field is optional but, if filled, it must contain only alphabetic characters, and the second input field is required: import * as Yup from “yup”; const validationSchema = Yup.object().shape({ firstField: Yup.string().matches(/^[A-Za-z]*$/, { message: “First field must contain only …