Introduction

Why ViteJS?

I've used Create React App (CRA) + Create React App Configuration Override (CRACO) for most of my React development. It's great and probably what you want to use within your company if you already have the infrastructure and developer knowledge.

However, , run the following command in an empty directory to get your app off the ground. I use yarn; you can use whatever you want.

# yarn

yarn create vite your-react-app --template react-ts

From here you should have a basic ReactJS + Typescript app, you can 'yarn' and 'yarn dev' to make sure it runs. This app will be so barebones unless the template changes; you won't have Jest, babel, or any JS-based testing environments, so let's install these.

Packages required for Jest

The packages below are pretty standard for this installation; you have React Testing Library, Jest, then some Babel presets that will help transpile your code and configure the testing environment, and lastly, some types. All of these should be added to your DEV dependencies.

yarn add --dev jest @testing-library/react @babel/preset-react @testing-library/jest-dom @babel/preset-env @babel/preset-typescript @types/jest

Add a line in your package.json to run the Jest test command.

  "scripts": {

    "test": "jest", 

    // other commands should already exist

  },

Before we install some more packages, let's set up the babel configuration. Jest ships with Babel, so we must import the presets (a step above) and create a babel.config.cjs file in the root directory with this content. This is all it should take to have Babel working, but you won't see the results yet.

module.exports = {

  presets: [

    "@babel/preset-env",

    "@babel/preset-typescript",

    ["@babel/preset-react", {

      "runtime": "automatic"

    }]

  ],

};

Back to package installation, we need 3 packages here to get things working.

yarn add --dev jest-environment-jsdom //The testing environment itself

yarn add --dev ts-jest                //Required for Jest to read TS testing files

yarn add --dev ts-node                //Required for Jest to read TS config files

Now we need to create our jest config, there's a few ways to do this (in package.json, or a js/ts/cjs and many more files) but I am going to keep it consistent with our babel choice, and use cjs

Create a file called jest.config.cjs with these contents, however I am going to comment on what's required, and what we will most likely need in the near future.

/** @type {import('ts-jest').JestConfigWithTsJest} */

module.exports = {

  preset: 'ts-jest', //REQUIRED

  testEnvironment: "jsdom", //REQUIRED

  moduleNameMapper: {

    "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js", // REQUIRED FOR CSS IMPORTS

  } 

};

Because I want to make this article as simple to follow, I highly recommend you add the moduleNameMapper line and create a style mock (add a folder named mocks in the root directory, then add a file called styleMock.js);

If things are failing, don't panic. Carefully read the errors and reiterate the steps above to ensure your code is identical. Otherwise here is a template repo I'm maintaining, which should reflect the exact steps listed above (plus some readme/gitignore stuff)

LinkedIn