Panduan untuk Menghindari Positif Palsu

Saat membuat aplikasi web, Anda perlu memastikan bahwa komponen Anda telah teruji dengan baik. Salah satu cara untuk menguji aplikasi Anda adalah dengan menggunakan pustaka seperti @testing-library . Pustaka ini memberi Anda fungsi untuk merender komponen Anda dan berinteraksi dengannya, membuatnya lebih mudah untuk menguji aplikasi Anda.

Salah satu elemen kunci dalam membuat komponen Anda dapat diuji adalah dengan menambahkan data-testidatribut unik ke dalamnya. Atribut ini bertindak sebagai penyeleksi yang membantu pustaka pengujian mengidentifikasi komponen yang ingin Anda uji. Namun, penting untuk menghindari hardcoding atribut ini di komponen Anda, karena hal itu dapat menyebabkan kesalahan positif saat menguji aplikasi Anda.

Berikut ini contoh hardcode 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();
  });
});

Atribut hardcoding data-testiddalam komponen yang dapat digunakan kembali dapat menyebabkan kesalahan positif saat menguji aplikasi Anda. Lihatlah contoh ini:

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();
  });
});

Untuk menghindari masalah ini, Anda harus meneruskan data-testidatribut sebagai properti, sehingga setiap instance komponen dapat memiliki nilai yang unik. Ini akan membantu memastikan bahwa tes Anda akurat dan dapat diandalkan. Berikut contohnya:

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();
  });
});