Un guide pour éviter les faux positifs

Lors de la création d'une application Web, vous devez vous assurer que vos composants sont bien testés. L'une des façons de tester votre application consiste à utiliser une bibliothèque comme @testing-library . Cette bibliothèque vous fournit des fonctions pour rendre vos composants et interagir avec eux, ce qui facilite le test de votre application.

L'un des éléments clés pour rendre vos composants testables est de data-testidleur ajouter des attributs uniques. Ces attributs agissent comme des sélecteurs qui aident la bibliothèque de test à identifier les composants que vous souhaitez tester. Cependant, il est important d'éviter de coder en dur ces attributs dans vos composants, car cela pourrait entraîner des faux positifs lors du test de votre application.

Voici un exemple de code dur data-testid:

import React from 'react';

interface ButtonProps {
  label: string;
  onClick: () => void;
}

const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
  return (
    <button data-testid="submit-button" onClick={onClick}>
      {label}
    </button>
  );
};

export default Button;

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

describe('Button component', () => {
  it('should call onClick function when button is clicked', () => {
    const mockOnClick = jest.fn();
    const { getByTestId } = render(
      <Button label="Submit" onClick={mockOnClick} />
    );
    const submitButton = getByTestId('submit-button');
    fireEvent.click(submitButton);
    expect(mockOnClick).toHaveBeenCalled();
  });
});

Les attributs de codage en dur data-testiddans les composants réutilisables peuvent entraîner des faux positifs lors du test de votre application. Jetez un oeil à cet exemple:

import React from 'react';

interface ButtonProps {
  label: string;
  onClick: () => void;
}

const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
  return (
    <button data-testid="submit-button" onClick={onClick}>
      {label}
    </button>
  );
};

const App = () => {
  return (
    <div>
      <Button label="Submit 1" onClick={() => console.log('Button 1 clicked')} />
      <Button label="Submit 2" onClick={() => console.log('Button 2 clicked')} />
    </div>
  );
};

export default App;

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

describe('App component', () => {
  it('should call the onClick function of both buttons when they are clicked', () => {
    const mockOnClick1 = jest.fn();
    const mockOnClick2 = jest.fn();
    const { getByTestId } = render(
      <App />
    );
    const submitButton1 = getByTestId('submit-button');
    fireEvent.click(submitButton1);
    expect(mockOnClick1).toHaveBeenCalled();
    const submitButton2 = getByTestId('submit-button');
    fireEvent.click(submitButton2);
    expect(mockOnClick2).toHaveBeenCalled();
  });
});

Pour éviter ce problème, vous devez transmettre data-testiddes attributs en tant qu'accessoires, afin que chaque instance de composant puisse avoir une valeur unique. Cela aidera à garantir que vos tests sont précis et fiables. Voici un exemple :

import React from 'react';

interface ButtonProps {
  label: string;
  onClick: () => void;
  testId: string;
}

const Button: React.FC<ButtonProps> = ({ label, onClick, testId }) => {
  return (
    <button data-testid={testId} onClick={onClick}>
      {label}
    </button>
  );
};

export default Button;

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

describe('Button component', () => {
  it('should call onClick function when button is clicked', () => {
    const mockOnClick = jest.fn();
    const { getByTestId } = render(
      <Button label="Submit" onClick={mockOnClick} testId="submit-button-1" />
    );
    const submitButton = getByTestId('submit-button-1');
    fireEvent.click(submitButton);
    expect(mockOnClick).toHaveBeenCalled();
  });
});