Setup Jest (Ts) for a brand new React project

Alright, first things first — this post is for me. I’m just promoting a note from my Notion to a post.
Maybe someone finds it useful, who knows 🤷‍♂️.

But don’t get me wrong, the real reason is just to have it handy in case I can’t log into my Notion account.

Context: I'm preparing the resources for my next React course and we're to talk about unit testing (Jest).

We have already npm create vite@latest, and created the well-known <Button />

We want this to work: button.test.tsx

import { render, screen } from "@testing-library/react";
import { Button } from "./button";

describe("<Button />", () => {
  it("renders: match snapshot", () => {
    render(<Button onClick={jest.fn()} />);
    const button = screen.getByRole("button");
    expect(button).toMatchSnapshot();
  });
});

STEPS

npm i --save-dev jest
npm init jest@latest

Dependencies (ts)

npm i -D @types/jest
npm i -D @testing-library/react
npm i -D ts-jest
npm i -D jest-environment-jsdom
npm i -D jest-transform-stub

jest.config.mjs

/**
 * For a detailed explanation regarding each configuration property, visit:
 * https://jestjs.io/docs/configuration
 */

/** @type {import('jest').Config} */
const config = {
  clearMocks: true,
  collectCoverage: true,
  collectCoverageFrom: ["src/**"],
  coverageDirectory: "coverage",
  coverageProvider: "v8",
  moduleDirectories: ["node_modules", "src"], // @see https://stackoverflow.com/a/51174924/1614677
  preset: "ts-jest",
  resetMocks: true,
  restoreMocks: true,
  roots: ["<rootDir>/src"],
  testEnvironment: "jsdom",
  testMatch: ["**/?(*.)+(spec|test).[tj]s?(x)"],
  transform: {
    "^.+\\.(js|ts|tsx)$": "ts-jest",
    "^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
      "jest-transform-stub",
  },
};

export default config;

Won't work cause of the default tsconfig (2x tsconfigs by default)... this is my tsconfig.json

{
  "compilerOptions": {
    /* type checking */
    "strict": true, // turn on strict mode family
    "noFallthroughCasesInSwitch": true, // every switch case should break or return
    /* modules */
    "baseUrl": "src", // base path for imports
    "module": "ESNext", // ESModules & allows «import.meta»
    "moduleResolution": "Node", // recommended: ts mimic node resolution
    "resolveJsonModule": true, // allows .json files
    /* language */
    "target": "ES2016",
    "jsx": "react-jsx",
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ESNext"
    ],
    /* js support */
    "allowJs": true, // allows .js files
    /* Interop Constraints */
    "esModuleInterop": true, // recommended: compatibility with libraries using CommonJS
    "allowSyntheticDefaultImports": true, // allows «import Foo from 'foo'»
    "forceConsistentCasingInFileNames": true, // checks for case sensitivity file names
    "isolatedModules": true, // force all files to import/export (no global scripts)
    /* completeness */
    "skipLibCheck": true, // skip checking node_modules/*.d.ts files
    /* emit */
    "noEmit": true // checks for errors only
  },
  "include": [
    "src"
  ]
}

==> output

 PASS  src/components/button.test.tsx
  <Button />
    ✓ renders: match snapshot (35 ms)

 › 1 snapshot written.

--
nice.

Manuel Artero Anguita 🟨 @manuartero