Eseguire test di componenti in React Typescript con Jest

In realtà non useremo solo Jest per eseguire i test, ma diciamo che è la libreria di punta.

Comunque dovremmo installare e configurare parecchia roba, soprattutto perchè stiamo usando Typescript.

Inoltre io ho creato il progetto con Vite, che può portare a delle differenze rispetto ad altri modi con cui potete creare i progetti in React.

Insomma, come al solito troppe possibilità e troppe differenze......

Cominciamo quindi con l'installazione:

npm install --save-dev jest @testing-library/react @testing-library/jest-dom @testing-library/user-event @babel/preset-env @babel/preset-react @babel/preset-typescript babel-jest jest-environment-jsdom

Poi dobbiamo creare una serie di file di configurazione nella root, cominciando da jest.config.js:

export default {
  testEnvironment: 'jest-environment-jsdom',
  transform: {
    '^.+\\.(t|j)sx?$': 'babel-jest',
  },
  moduleNameMapper: {
    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
  },
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
};

Poi abbiamo babel.config.js:

export default {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],
};

E jest.setup.js:

import '@testing-library/jest-dom';

Adesso creiamo il nostro componente Button.tsx:

import React from 'react';

interface ButtonComponentProps {
  count: number;
  setCount: React.Dispatch<React.SetStateAction<number>>;
}

const ButtonComponent: React.FC<ButtonComponentProps> = ({count, setCount}) => {
  return (
      <button onClick={() => setCount((count) => count + 1)}>
        count is {count}
      </button>
  );
};

export default ButtonComponent;

E il file per il test Button.test.tsx:

import React from 'react';
import {render, screen, fireEvent} from '@testing-library/react';
import Button from './Button';

describe('Button', () => {
  it('renders the button with the correct initial count', () => {
    const mockSetCount = jest.fn();
    render(<Button count={0} setCount={mockSetCount}/>);

    const button = screen.getByRole('button', {name: /count is 0/i});
    expect(button).toBeInTheDocument();
  });

  it('calls setCount when the button is clicked', () => {
    const mockSetCount = jest.fn();
    render(<Button count={0} setCount={mockSetCount}/>);

    const button = screen.getByRole('button', {name: /count is 0/i});
    fireEvent.click(button);

    expect(mockSetCount).toHaveBeenCalledTimes(1);
    expect(mockSetCount).toHaveBeenCalledWith(expect.any(Function));
  });
});

Poi dobbiamo aggiungere nel package.json lo script per il lancio del test:

  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "test": "jest"
  },

Adesso lanciamo il test:

npm test

Enjoy!