Setup Jest for typescript based Frontend projects

[reboottime]

Setup Jest

• Install dependencies related to jest and typescript

  yarn add --dev jest babel-jest @babel/core @babel/preset-env  @babel/preset-typescript ts-jest @types/jest

• Generate your jest configuration file

yarn jest --init

After following CLI guide steps preset by the above command, jest generates a default jest.config.js file for us under the root folder.

Add basic configurations for our app

• Tell jest where to look for files to test (configure jest.config.js)

  {
       roots: ["<rootDir>/src"],
   }

  • As our project uses typescript and es6 based module, Jest needs a code transformation guide setup

  {
   // jest.config.js
     transform: {
         "\\.jsx?$": "babel-jest",
         "\\.tsx?$": "ts-jest",
    },
  }

  Also, to transform code, we need babel's help, so let's add .babelrc.json setup { "presets": [ "@babel/preset-env", [ "@babel/preset-react", { "runtime": "automatic" } ] ]

Tell jest how to map alias import in test cases

  moduleNameMapper: {
    "\\.(css|scss)$": "identity-obj-proxy",
    "\\.svg": "<rootDir>/src/__mocks__/svgrMock.js",
    "@/components/(.*)": "<rootDir>/src/components/$1",
    "@/assets/(.*)": "<rootDir>/src/assets/$1",
    "@/hooks/(.*)": "<rootDir>/src/hooks/$1",
    "@/pages/(.*)": "<rootDir>/src/pages/$1",
    "@/sass/(.*)": "<rootDir>/src/sass/$1",
    "@/utils/(.*)": "<rootDir>/src/utils/$1",
    "@/services/(.*)": "<rootDir>/src/services/$1",
  },

This step tells jest when reading alias in a source file, where to look for real file.

• Provide sass file import in mocking in jest

 "\\.(css|scss)$": "identity-obj-proxy",

[reboottime]

Update jest configuration files to support importing svg files as react components

• declare svg mocking for jest
  • create mocks folder under the src folder
  • Add svgMock.js under the newly created mocks folder
  • update svgMock.js as

import React from 'react';

export default 'SvgrURL';
const SvgrMock = React.forwardRef((props, ref) => <span ref={ref} {...props} />);

export const ReactComponent = SvgrMock;

• Inform jest about how to handle importing svg files

  moduleNameMapper: {
    "\\.svg": "<rootDir>/src/__mocks__/svgrMock.js",
  },

[reboottime]

References

Reference readings

1. How to import SVG files as react components in Vite based react app
   • https://vitejs.dev/guide/features.html#client-types
   • https://www.npmjs.com/package/vite-plugin-svgr
     2. get started with jest
   • https://jestjs.io/docs/getting-started
   • setup js dom https://stackoverflow.com/questions/56547215/react-testing-library-why-is-tobeinthedocument-not-a-function