การทดสอบการเขียนใน Reactเป็นสิ่งสำคัญเพื่อให้แน่ใจว่าแอปพลิเคชันทำงานตามที่คาดไว้ จับจุดบกพร่องในช่วงต้นของวงจรการพัฒนา และลดค่าใช้จ่ายโดยรวมในการแก้ไขปัญหา

การทดสอบยังให้ความมั่นใจในคุณภาพของ codebase ทำให้ง่ายต่อการบำรุงรักษาและปรับโครงสร้างใหม่ ด้วยการทดสอบโค้ด นักพัฒนาสามารถมั่นใจได้ว่าตรงตามข้อกำหนดและข้อมูลจำเพาะของแอปพลิเคชัน และระบุส่วนที่อาจต้องปรับปรุงหรือปรับให้เหมาะสม

โดยรวมแล้ว การทดสอบเป็นองค์ประกอบสำคัญของกระบวนการพัฒนาซอฟต์แวร์ ซึ่งช่วยปรับปรุงคุณภาพและความน่าเชื่อถือของแอปพลิเคชัน React

ฉันได้สร้างเอกสารสรุปเกี่ยวกับReact Testing Fundamentalแล้ว ดาวน์โหลดได้ฟรี

ประเภทของการทดสอบ

เป็นการทดสอบหลายประเภทในโครงการซอฟต์แวร์ที่จริงจัง

• การทดสอบหน่วยตรวจสอบการทำงานของแต่ละหน่วยหรือโมดูลของรหัส ในหลาย ๆ โครงการ คุณจะต้องเขียนแบบทดสอบหน่วยการเรียนรู้ 80% ของการทดสอบทั้งหมดของคุณ
• การทดสอบการรวมจะตรวจสอบการโต้ตอบระหว่างหน่วยหรือโมดูลของรหัสต่างๆ อีก 15% — 20% สำหรับการทดสอบการรวมระบบ
• การทดสอบแบบครบวงจรจะตรวจสอบการทำงานของระบบหรือแอปพลิเคชันทั้งหมด เนื่องจากการทดสอบแบบ end-to-end นั้นเป็นของจริง — หมายความว่าพวกเขาต้องการทรัพยากรจำนวนมากและในขณะที่พวกเขากำลังเชื่อมต่อส่วนประกอบจริง (ฐานข้อมูล เครือข่าย และบริการของบุคคลที่สาม) การทดสอบเหล่านี้มีราคาแพง เปราะบาง และควรใช้ให้คุ้มค่าที่สุดเท่านั้น เส้นทางที่สำคัญ คุณมักจะไม่มีการทดสอบมากเกินไปที่นี่ (ประมาณ 5%)

ก่อนดำดิ่งสู่การทดสอบ เรามาทำความเข้าใจกับคำศัพท์พื้นฐานบางคำกันก่อน

รองชนะเลิศการทดสอบ

ตัวดำเนินการทดสอบคือเครื่องมือที่ดำเนินการทดสอบอัตโนมัติที่เขียนขึ้นสำหรับแอปพลิเคชันซอฟต์แวร์และรายงานผลไปยังผู้ใช้ จัดทำสภาพแวดล้อมเพื่อเรียกใช้การทดสอบและรวบรวมผลการทดสอบ นักวิ่งทดสอบสามารถกำหนดค่าให้เรียกใช้การทดสอบประเภทต่างๆ เช่น การทดสอบหน่วย การทดสอบการรวม และการทดสอบตั้งแต่ต้นจนจบ

โดยพื้นฐานแล้ว ผู้ดำเนินการทดสอบสามารถตั้งเวลาและเรียกใช้การทดสอบแบบคู่ขนาน เพื่อให้มั่นใจว่ามีการเรียกใช้ฟังก์ชันการตั้งค่าและการแยกส่วนในเวลาที่เหมาะสม ฯลฯ นอกจากนี้ คุณสามารถกำหนดค่าให้เรียกใช้การทดสอบชุดย่อยเล็กๆ เท่านั้น ซึ่งมีประโยชน์สำหรับ โครงการขนาดใหญ่ที่มีการทดสอบนับพัน

นักวิ่งทดสอบที่มีชื่อเสียงสำหรับแอปพลิเคชัน JavaScript และ React ได้แก่ Jest, Mocha และ Cypress

ชุดทดสอบ

ใน Jest ชุดทดสอบถูกกำหนดโดยใช้describeฟังก์ชัน ซึ่งใช้สองอาร์กิวเมนต์: สตริงที่อธิบายชุดและฟังก์ชันการเรียกกลับที่มีกรณีทดสอบอย่างน้อยหนึ่งกรณีโดยใช้ฟังก์ชันtestหรือ itฟังก์ชัน นี้describeช่วยให้สามารถจัดกลุ่มการทดสอบที่เกี่ยวข้องเป็นชุดเดียวได้ ตัวอย่างเช่น:

describe('calculator', () => {
  test('addition', () => {
    expect(1+1).toBe(2);
  });

  test('subtract', () => {
    expect(5-3).toBe(2);
  });
});

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

นอกจากนี้ ไลบรารียังสนับสนุนให้นักพัฒนาเขียนการทดสอบที่ใกล้เคียงกับวิธีที่ผู้ใช้โต้ตอบกับคอมโพเนนต์ วิธีนี้สามารถช่วยในการตรวจจับจุดบกพร่องที่อาจไม่ถูกตรวจพบโดยการทดสอบที่เน้นเฉพาะรายละเอียดการใช้งาน

การเขียนแบบทดสอบพื้นฐาน

การทดสอบครั้งแรกของเราจะเป็นแบบrenderง่ายๆ การทดสอบนี้ใช้renderฟังก์ชัน from @testing-library/reactเพื่อแสดงผลAComponentส่วนประกอบ และคาดว่าส่วนประกอบจะแสดงผลโดยไม่มีข้อผิดพลาด:

import React from 'react';  
import { render } from '@testing-library/react';  
​  
import AComponent from './AComponent.tsx';  
​  
test('renders AComponent without errors', () => {  
  render(<AComponent />);  
});

ตัวอย่างเช่น:

import React from 'react';  
import { render, fireEvent, screen } from '@testing-library/react';  
import AComponent from './AComponent';  
​  
test('updates state when button is clicked', () => {  
  const { getByText } = render(<AComponent />);
  
  const button = screen.getByText('Click me');
  fireEvent.click(button);
  expect(button).toHaveTextContent('Clicked!');
});

หมายเหตุ: แม้ว่าเมธอด fireEvent ที่ให้บริการโดย React Testing Library สามารถจำลองการโต้ตอบของผู้ใช้ได้ แต่การใช้ไลบรารี userEvent มักจะสมจริงกว่า `userEvent' ให้การจำลองที่แม่นยำมากขึ้นว่าผู้ใช้จะโต้ตอบกับส่วนประกอบของคุณอย่างไร และสามารถช่วยตรวจจับจุดบกพร่องที่อาจไม่ถูกตรวจจับด้วยเมธอด fireEvent ที่เป็นนามธรรมมากขึ้น

ใช้userEventสำหรับการกระทำที่สมจริง

userEventให้การจำลองที่แม่นยำยิ่งขึ้นว่าผู้ใช้โต้ตอบกับส่วนประกอบของคุณอย่างไร

import { render, screen } from "@testing-library/react";  
import userEvent from "@testing-library/user-event";  
import Button from "./Button";  
​  
test("clicking a button", () => {  
  render(<Button />);
  
  const button = screen.getByRole("button");
  userEvent.click(button);
    
  expect(button).toHaveTextContent("Clicked");
});

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

test('renders list of items correctly', () => {
  const items = [
    { id: 1, text: 'Item 1' },
    { id: 2, text: 'Item 2' },
    { id: 3, text: 'Item 3' },
  ];
  
  const { getAllByTestId } = render(<AComponent items={items} />);
  
  const itemsList = screen.getAllByTestId('item');
  expect(itemsList).toHaveLength(items.length);
  
  itemsList.forEach((item, index) => {
    expect(item).toHaveTextContent(items[index].text);
  });
});

การเยาะเย้ยและ Stubbing

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

Mocks เป็นวัตถุปลอมที่มีลักษณะการทำงานที่กำหนดไว้ล่วงหน้า และสามารถใช้แทนที่วัตถุจริงในการทดสอบได้ Stubs เป็นฟังก์ชันปลอมที่แทนที่ฟังก์ชันจริงในการทดสอบและส่งคืนค่าที่กำหนดไว้ล่วงหน้า Martin Fowler มีบทความเก่าๆ เชิงลึกที่ดีกว่าเกี่ยวกับการล้อเลียนและเรื่องสั้นและแนวปฏิบัติบางประการสำหรับการทดสอบ ได้อ่านถ้าคุณยังไม่ได้

ต่อไปนี้คือตัวอย่างการใช้แบบจำลองเพื่อแยกการพึ่งพาในการทดสอบ:

import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from "@testing-library/user-event";  

import axios from 'axios';

import AComponent from './AComponent';

jest.mock('axios');

test('fetches data and updates state', async () => {
  const data = { id: 1, name: 'John' };
  
  axios.get.mockResolvedValue({ data });
  
  const { getByText } = render(<AComponent />);
  const button = screen.getByText('Fetch data');
  
  userEvent.click(button);
  
  const dataElement = screen.getByText(data.name);
  expect(dataElement).toBeInTheDocument();
});

รายงานการทดสอบ

คุณยังสามารถเลือกที่จะสร้างรายงานการทดสอบเพื่อให้คุณสามารถดูข้อมูลทางสถิติและทำการวิเคราะห์เกี่ยวกับความครอบคลุมเมื่อเวลาผ่านไป เป็นวิธีที่ยอดเยี่ยมในการแชร์ข้อมูลดังกล่าวในสภาพแวดล้อมการผสานรวมอย่างต่อเนื่อง เพื่อให้ทุกคนในทีมเห็นได้อย่างชัดเจน

ประการแรก ติดตั้งแพ็คเกจjest-html-reportersที่รูทของโปรเจ็กต์ของคุณ จากนั้นในส่วนpackage.jsonเพิ่มอีกหนึ่งคำสั่งreportในส่วนสคริปต์ และทุกครั้งที่คุณเรียกใช้npm run reportมันจะสร้างรายงานให้คุณ

"report": "react-scripts test --env=jsdom --reporters=default \
--reporters=jest-html-reporters"

โดยสรุปแล้ว การทดสอบเป็นส่วนสำคัญของการพัฒนาซอฟต์แวร์และมีความสำคัญอย่างยิ่งต่อการรับรองว่า codebase นั้นมีความน่าเชื่อถือและมีคุณภาพสูง Jest และ React-Testing-Library เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการทดสอบแอปพลิเคชัน React และด้วยการใช้สิ่งเหล่านี้ นักพัฒนาสามารถตรวจจับข้อบกพร่องได้ตั้งแต่เนิ่นๆ ลดค่าใช้จ่ายในการแก้ไขปัญหา และมั่นใจในคุณภาพของโค้ด

นอกจากนี้ ด้วยการกำหนดค่าและการรายงานที่เหมาะสม นักพัฒนาสามารถตรวจสอบความสมบูรณ์ของโค้ดเบสและระบุส่วนที่ต้องปรับปรุงได้อย่างง่ายดาย ด้วยการรวมการทดสอบเข้ากับกระบวนการพัฒนา นักพัฒนาสามารถสร้างแอปพลิเคชัน React ที่ดีขึ้นและมอบประสบการณ์ผู้ใช้ที่ดีขึ้น

ถ้าคุณชอบอ่าน โปรดลงทะเบียน สำหรับรายชื่อผู้รับจดหมายของฉัน ฉัน แบ่งปัน เทคนิค Clean Code และ Refactoring ทุกสัปดาห์ผ่านบล็อกหนังสือและวิดีโอ