M

MLOG

ไทย

ฝึกฝน React Testing Library (RTL) ให้เชี่ยวชาญด้วยคู่มือฉบับสมบูรณ์นี้ เรียนรู้วิธีเขียนเทสต์ที่มีประสิทธิภาพ ดูแลรักษาง่าย และเน้นผู้ใช้เป็นศูนย์กลางสำหรับแอปพลิเคชัน React ของคุณ

React Testing Library: คู่มือฉบับสมบูรณ์

ในวงการพัฒนาเว็บที่เปลี่ยนแปลงอย่างรวดเร็วในปัจจุบัน การรับรองคุณภาพและความน่าเชื่อถือของแอปพลิเคชัน React ของคุณเป็นสิ่งสำคัญยิ่ง React Testing Library (RTL) ได้กลายเป็นโซลูชันที่ได้รับความนิยมและมีประสิทธิภาพสำหรับการเขียนเทสต์ที่เน้นมุมมองของผู้ใช้ คู่มือนี้จะให้ภาพรวมที่สมบูรณ์ของ RTL ครอบคลุมทุกอย่างตั้งแต่แนวคิดพื้นฐานไปจนถึงเทคนิคขั้นสูง เพื่อให้คุณสามารถสร้างแอปพลิเคชัน React ที่แข็งแกร่งและดูแลรักษาง่าย

ทำไมถึงควรเลือก React Testing Library?

แนวทางการทดสอบแบบดั้งเดิมมักจะอ้างอิงกับรายละเอียดการ υλο hoá (implementation details) ทำให้เทสต์เปราะบางและมีแนวโน้มที่จะพังเมื่อมีการเปลี่ยนแปลงโค้ดเล็กน้อย ในทางกลับกัน RTL สนับสนุนให้คุณทดสอบคอมโพเนนต์ของคุณเหมือนกับที่ผู้ใช้โต้ตอบกับมัน โดยเน้นสิ่งที่ผู้ใช้เห็นและสัมผัส แนวทางนี้มีข้อดีที่สำคัญหลายประการ:

การตั้งค่าสภาพแวดล้อมการทดสอบของคุณ

ก่อนที่คุณจะเริ่มใช้ RTL คุณต้องตั้งค่าสภาพแวดล้อมการทดสอบของคุณ ซึ่งโดยทั่วไปจะเกี่ยวข้องกับการติดตั้ง dependencies ที่จำเป็นและการกำหนดค่าเฟรมเวิร์กการทดสอบของคุณ

สิ่งที่ต้องมีก่อน

การติดตั้ง

ติดตั้งแพ็คเกจต่อไปนี้โดยใช้ npm หรือ yarn:

npm install --save-dev @testing-library/react @testing-library/jest-dom jest babel-jest @babel/preset-env @babel/preset-react

หรือใช้ yarn:

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

คำอธิบายแพ็คเกจ:

การกำหนดค่า (Configuration)

สร้างไฟล์ `babel.config.js` ที่รากของโปรเจกต์ของคุณด้วยเนื้อหาต่อไปนี้:

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
};

อัปเดตไฟล์ `package.json` ของคุณเพื่อเพิ่ม test script:

{
  "scripts": {
    "test": "jest"
  }
}

สร้างไฟล์ `jest.config.js` ที่รากของโปรเจกต์ของคุณเพื่อกำหนดค่า Jest การกำหนดค่าขั้นต่ำอาจมีลักษณะดังนี้:

module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['/src/setupTests.js'],
};

สร้างไฟล์ `src/setupTests.js` พร้อมเนื้อหาต่อไปนี้ เพื่อให้แน่ใจว่า Jest DOM matchers จะพร้อมใช้งานในทุกเทสต์ของคุณ:

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

การเขียนเทสต์แรกของคุณ

มาเริ่มด้วยตัวอย่างง่ายๆ สมมติว่าคุณมีคอมโพเนนต์ React ที่แสดงข้อความทักทาย:

// src/components/Greeting.js
import React from 'react';

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

export default Greeting;

ตอนนี้ มาเขียนเทสต์สำหรับคอมโพเนนต์นี้กัน:

// src/components/Greeting.test.js
import React from 'react';
import { render, screen } from '@testing-library/react';
import Greeting from './Greeting';

test('renders a greeting message', () => {
  render(<Greeting name="World" />);
  const greetingElement = screen.getByText(/Hello, World!/i);
  expect(greetingElement).toBeInTheDocument();
});

คำอธิบาย:

หากต้องการรันเทสต์ ให้รันคำสั่งต่อไปนี้ในเทอร์มินัลของคุณ:

npm test

หากทุกอย่างถูกกำหนดค่าอย่างถูกต้อง เทสต์ควรจะผ่าน

Query ทั่วไปของ RTL

RTL มีเมธอด query ที่หลากหลายสำหรับค้นหา element ใน DOM ซึ่ง query เหล่านี้ถูกออกแบบมาเพื่อเลียนแบบวิธีที่ผู้ใช้โต้ตอบกับแอปพลิเคชันของคุณ

`getByRole`

query นี้ค้นหา element ด้วย ARIA role ของมัน เป็นแนวทางปฏิบัติที่ดีที่จะใช้ `getByRole` ทุกครั้งที่เป็นไปได้ เนื่องจากจะช่วยส่งเสริมการเข้าถึงได้ง่าย (accessibility) และทำให้แน่ใจว่าเทสต์ของคุณทนทานต่อการเปลี่ยนแปลงโครงสร้าง DOM ภายใต้

<button role="button">Click me</button>

const buttonElement = screen.getByRole('button');
expect(buttonElement).toBeInTheDocument();

`getByLabelText`

query นี้ค้นหา element ด้วยข้อความของ label ที่เกี่ยวข้อง เหมาะสำหรับการทดสอบองค์ประกอบของฟอร์ม

<label htmlFor="name">Name:</label>
<input type="text" id="name" />

const nameInputElement = screen.getByLabelText('Name:');
expect(nameInputElement).toBeInTheDocument();

`getByPlaceholderText`

query นี้ค้นหา element ด้วยข้อความ placeholder ของมัน

<input type="text" placeholder="Enter your email" />

const emailInputElement = screen.getByPlaceholderText('Enter your email');
expect(emailInputElement).toBeInTheDocument();

`getByAltText`

query นี้ค้นหา element รูปภาพด้วย alt text ของมัน การให้ alt text ที่มีความหมายสำหรับรูปภาพทั้งหมดเป็นสิ่งสำคัญเพื่อให้แน่ใจว่าสามารถเข้าถึงได้

<img src="logo.png" alt="Company Logo" />

const logoImageElement = screen.getByAltText('Company Logo');
expect(logoImageElement).toBeInTheDocument();

`getByTitle`

query นี้ค้นหา element ด้วย title attribute ของมัน

<span title="Close">X</span>

const closeElement = screen.getByTitle('Close');
expect(closeElement).toBeInTheDocument();

`getByDisplayValue`

query นี้ค้นหา element ด้วย display value ของมัน ซึ่งมีประโยชน์สำหรับการทดสอบ input ของฟอร์มที่มีค่าที่กรอกไว้ล่วงหน้า

<input type="text" value="Initial Value" />

const inputElement = screen.getByDisplayValue('Initial Value');
expect(inputElement).toBeInTheDocument();

`getAllBy*` Queries

นอกเหนือจาก `getBy*` queries แล้ว RTL ยังมี `getAllBy*` queries ซึ่งจะคืนค่าอาร์เรย์ของ element ที่ตรงกัน สิ่งเหล่านี้มีประโยชน์เมื่อคุณต้องการยืนยันว่ามี element หลายตัวที่มีลักษณะเหมือนกันอยู่ใน DOM

<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

const listItems = screen.getAllByRole('listitem');
expect(listItems).toHaveLength(3);

`queryBy*` Queries

`queryBy*` queries คล้ายกับ `getBy*` queries แต่จะคืนค่า `null` หากไม่พบ element ที่ตรงกัน แทนที่จะโยน error สิ่งนี้มีประโยชน์เมื่อคุณต้องการยืนยันว่า element *ไม่มี* อยู่ใน DOM

const missingElement = screen.queryByText('Non-existent text');
expect(missingElement).toBeNull();

`findBy*` Queries

`findBy*` queries เป็นเวอร์ชัน asynchronous ของ `getBy*` queries โดยจะคืนค่า Promise ที่จะ resolve เมื่อพบ element ที่ตรงกัน สิ่งเหล่านี้มีประโยชน์สำหรับการทดสอบการทำงานแบบ asynchronous เช่น การดึงข้อมูลจาก API

// Simulating an asynchronous data fetch
const fetchData = () => new Promise(resolve => {
  setTimeout(() => resolve('Data Loaded!'), 1000);
});

function MyComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetchData().then(setData);
  }, []);

  return <div>{data}</div>;
}

test('loads data asynchronously', async () => {
  render(<MyComponent />);
  const dataElement = await screen.findByText('Data Loaded!');
  expect(dataElement).toBeInTheDocument();
});

การจำลองการโต้ตอบของผู้ใช้

RTL มี `fireEvent` และ `userEvent` APIs สำหรับจำลองการโต้ตอบของผู้ใช้ เช่น การคลิกปุ่ม การพิมพ์ในช่อง input และการส่งฟอร์ม

`fireEvent`

`fireEvent` ช่วยให้คุณสามารถกระตุ้น DOM events ได้โดยโปรแกรม มันเป็น API ระดับล่างที่ให้คุณควบคุม event ที่จะถูกยิงได้อย่างละเอียด

<button onClick={() => alert('Button clicked!')}>Click me</button>

import { fireEvent } from '@testing-library/react';

test('simulates a button click', () => {
  const alertMock = jest.spyOn(window, 'alert').mockImplementation(() => {});
  render(<button onClick={() => alert('Button clicked!')}>Click me</button>);
  const buttonElement = screen.getByRole('button');
  fireEvent.click(buttonElement);
  expect(alertMock).toHaveBeenCalledTimes(1);
  alertMock.mockRestore();
});

`userEvent`

`userEvent` เป็น API ระดับสูงที่จำลองการโต้ตอบของผู้ใช้ได้สมจริงยิ่งขึ้น มันจัดการรายละเอียดต่างๆ เช่น การจัดการ focus และลำดับของ event ทำให้เทสต์ของคุณแข็งแกร่งและเปราะบางน้อยลง

<input type="text" onChange={e => console.log(e.target.value)} />

import userEvent from '@testing-library/user-event';

test('simulates typing in an input field', () => {
  const inputElement = screen.getByRole('textbox');
  userEvent.type(inputElement, 'Hello, world!');
  expect(inputElement).toHaveValue('Hello, world!');
});

การทดสอบโค้ด Asynchronous

แอปพลิเคชัน React จำนวนมากมีการทำงานแบบ asynchronous เช่น การดึงข้อมูลจาก API ซึ่ง RTL มีเครื่องมือหลายอย่างสำหรับการทดสอบโค้ด asynchronous

`waitFor`

`waitFor` ช่วยให้คุณรอจนกว่าเงื่อนไขจะเป็นจริงก่อนที่จะทำการยืนยัน มีประโยชน์สำหรับการทดสอบการทำงานแบบ asynchronous ที่ใช้เวลาสักครู่ในการดำเนินการให้เสร็จสิ้น

function MyComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    setTimeout(() => {
      setData('Data loaded!');
    }, 1000);
  }, []);

  return <div>{data}</div>;
}

import { waitFor } from '@testing-library/react';

test('waits for data to load', async () => {
  render(<MyComponent />);
  await waitFor(() => screen.getByText('Data loaded!'));
  const dataElement = screen.getByText('Data loaded!');
  expect(dataElement).toBeInTheDocument();
});

`findBy*` Queries

ดังที่ได้กล่าวไว้ก่อนหน้านี้ `findBy*` queries เป็นแบบ asynchronous และคืนค่า Promise ที่จะ resolve เมื่อพบ element ที่ตรงกัน สิ่งเหล่านี้มีประโยชน์สำหรับการทดสอบการทำงานแบบ asynchronous ที่ส่งผลให้เกิดการเปลี่ยนแปลงใน DOM

การทดสอบ Hooks

React Hooks คือฟังก์ชันที่สามารถนำกลับมาใช้ใหม่ได้ซึ่งห่อหุ้มตรรกะที่มีสถานะ (stateful logic) RTL มี `renderHook` utility จาก `@testing-library/react-hooks` (ซึ่งถูกเลิกใช้แล้วและถูกรวมเข้ากับ `@testing-library/react` โดยตรงตั้งแต่เวอร์ชัน v17) สำหรับการทดสอบ custom Hooks แบบแยกเดี่ยว

// src/hooks/useCounter.js
import { useState } from 'react';

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  const decrement = () => {
    setCount(prevCount => prevCount - 1);
  };

  return { count, increment, decrement };
}

export default useCounter;

// src/hooks/useCounter.test.js
import { renderHook, act } from '@testing-library/react';
import useCounter from './useCounter';

test('increments the counter', () => {
  const { result } = renderHook(() => useCounter());

  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(1);
});

คำอธิบาย:

เทคนิคการทดสอบขั้นสูง

เมื่อคุณเชี่ยวชาญพื้นฐานของ RTL แล้ว คุณสามารถสำรวจเทคนิคการทดสอบขั้นสูงเพิ่มเติมเพื่อปรับปรุงคุณภาพและการบำรุงรักษาเทสต์ของคุณ

การ Mock Modules

บางครั้งคุณอาจต้อง mock โมดูลภายนอกหรือ dependencies เพื่อแยกคอมโพเนนต์ของคุณและควบคุมพฤติกรรมของมันระหว่างการทดสอบ Jest มี API การ mock ที่ทรงพลังสำหรับวัตถุประสงค์นี้

// src/api/dataService.js
export const fetchData = async () => {
  const response = await fetch('/api/data');
  const data = await response.json();
  return data;
};

// src/components/MyComponent.js
import React, { useState, useEffect } from 'react';
import { fetchData } from '../api/dataService';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(setData);
  }, []);

  return <div>{data}</div>;
}

// src/components/MyComponent.test.js
import { render, screen, waitFor } from '@testing-library/react';
import MyComponent from './MyComponent';
import * as dataService from '../api/dataService';

jest.mock('../api/dataService');

test('fetches data from the API', async () => {
  dataService.fetchData.mockResolvedValue({ message: 'Mocked data!' });

  render(<MyComponent />);

  await waitFor(() => screen.getByText('Mocked data!'));

  expect(screen.getByText('Mocked data!')).toBeInTheDocument();
  expect(dataService.fetchData).toHaveBeenCalledTimes(1);
});

คำอธิบาย:

Context Providers

หากคอมโพเนนต์ของคุณต้องพึ่งพา Context Provider คุณจะต้องครอบคอมโพเนนต์ของคุณด้วย provider นั้นในระหว่างการทดสอบ เพื่อให้แน่ใจว่าคอมโพเนนต์สามารถเข้าถึงค่า context ได้

// src/contexts/ThemeContext.js
import React, { createContext, useState } from 'react';

export const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// src/components/MyComponent.js
import React, { useContext } from 'react';
import { ThemeContext } from '../contexts/ThemeContext';

function MyComponent() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div style={{ backgroundColor: theme === 'light' ? '#fff' : '#000', color: theme === 'light' ? '#000' : '#fff' }}>
      <p>Current theme: {theme}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

// src/components/MyComponent.test.js
import { render, screen, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';
import { ThemeProvider } from '../contexts/ThemeContext';

test('toggles the theme', () => {
  render(
    <ThemeProvider>
      <MyComponent />
    </ThemeProvider>
  );

  const themeParagraph = screen.getByText(/Current theme: light/i);
  const toggleButton = screen.getByRole('button', { name: /Toggle Theme/i });

  expect(themeParagraph).toBeInTheDocument();

  fireEvent.click(toggleButton);

  expect(screen.getByText(/Current theme: dark/i)).toBeInTheDocument();
});

คำอธิบาย:

การทดสอบกับ Router

เมื่อทดสอบคอมโพเนนต์ที่ใช้ React Router คุณจะต้องให้ mock Router context คุณสามารถทำได้โดยใช้คอมโพเนนต์ `MemoryRouter` จาก `react-router-dom`

// src/components/MyComponent.js
import React from 'react';
import { Link } from 'react-router-dom';

function MyComponent() {
  return (
    <div>
      <Link to="/about">Go to About Page</Link>
    </div>
  );
}

// src/components/MyComponent.test.js
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import MyComponent from './MyComponent';

test('renders a link to the about page', () => {
  render(
    <MemoryRouter>
      <MyComponent />
    </MemoryRouter>
  );

  const linkElement = screen.getByRole('link', { name: /Go to About Page/i });
  expect(linkElement).toBeInTheDocument();
  expect(linkElement).toHaveAttribute('href', '/about');
});

คำอธิบาย:

แนวทางปฏิบัติที่ดีที่สุดสำหรับการเขียนเทสต์ที่มีประสิทธิภาพ

นี่คือแนวทางปฏิบัติที่ดีที่สุดบางประการที่ควรปฏิบัติตามเมื่อเขียนเทสต์ด้วย RTL:

สรุป

React Testing Library เป็นเครื่องมือที่ทรงพลังสำหรับการเขียนเทสต์ที่มีประสิทธิภาพ ดูแลรักษาง่าย และเน้นผู้ใช้เป็นศูนย์กลางสำหรับแอปพลิเคชัน React ของคุณ ด้วยการปฏิบัติตามหลักการและเทคนิคที่ระบุไว้ในคู่มือนี้ คุณสามารถสร้างแอปพลิเคชันที่แข็งแกร่งและน่าเชื่อถือซึ่งตอบสนองความต้องการของผู้ใช้ของคุณได้ อย่าลืมเน้นการทดสอบจากมุมมองของผู้ใช้ หลีกเลี่ยงการทดสอบรายละเอียดการ υλο hoá และเขียนเทสต์ที่ชัดเจนและรัดกุม การนำ RTL มาใช้และปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุด จะช่วยให้คุณปรับปรุงคุณภาพและการบำรุงรักษาโปรเจกต์ React ของคุณได้อย่างมีนัยสำคัญ ไม่ว่าคุณจะอยู่ที่ใดหรือมีความต้องการเฉพาะของกลุ่มเป้าหมายทั่วโลกอย่างไร