DEV Community

Weerayut Teja
Weerayut Teja

Posted on

การเขียนเทสเพื่อทดสอบโปรเจคแบบ React + Firebase

การเขียนเทสต์สำหรับโปรเจคที่ใช้ Firebase + React มีความสำคัญในการตรวจสอบความถูกต้องของฟังก์ชันต่าง ๆ โดยเฉพาะเมื่อ Firebase ให้บริการทั้งในส่วนของ Backend และ API การเทสต์จึงต้องครอบคลุมทั้งการทำงานของ React Component และการเชื่อมต่อกับ Firebase โดยมีแนวทางดังนี้ :


ประเภทของการเทสต์ที่ควรมีในโปรเจค

  1. Unit Test
    • ทดสอบฟังก์ชันหรือโมดูลที่แยกออกมา เช่น การเรียก Firebase API
  2. Integration Test
    • ทดสอบการทำงานระหว่าง Component React และ Firebase รวมถึงการทำงานร่วมกันระหว่างโมดูล
  3. End-to-End (E2E) Test
    • ทดสอบกระบวนการใช้งานของผู้ใช้ เช่น การล็อกอิน การเพิ่มข้อมูลลง Firestore หรือการแสดงผลข้อมูลในหน้าเว็บ

การเขียนเทสต์ Firebase ใน React

1. การเทสต์ฟังก์ชันที่ใช้ Firebase API

Firebase มี Client SDK ที่ให้เราใช้เชื่อมต่อกับบริการต่าง ๆ เช่น Authentication, Firestore หรือ Realtime Database ในการเขียนเทสต์ คุณสามารถ Mock พฤติกรรมของ Firebase SDK ได้

ตัวอย่างการ Mock Firebase
  • ใช้ไลบรารีอย่าง jest.mock เพื่อ Mock Firebase SDK
import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

jest.mock("firebase/auth", () => ({
    getAuth: jest.fn(),
    signInWithEmailAndPassword: jest.fn(),
}));

test("should call signInWithEmailAndPassword with correct arguments", async () => {
    const mockAuth = {};
    getAuth.mockReturnValue(mockAuth);
    signInWithEmailAndPassword.mockResolvedValue({ user: { uid: "12345" } });

    const result = await signInWithEmailAndPassword(mockAuth, "test@example.com", "password123");

    expect(signInWithEmailAndPassword).toHaveBeenCalledWith(mockAuth, "test@example.com", "password123");
    expect(result.user.uid).toBe("12345");
});
Enter fullscreen mode Exit fullscreen mode

การ Mock SDK จะช่วยให้คุณหลีกเลี่ยงการเชื่อมต่อกับ Firebase จริงในขณะเทสต์


2. การเทสต์ React Component ที่เชื่อม Firebase

  • React Component ที่เรียก Firebase API ควรแยกฟังก์ชัน Firebase ออกมาใน Utility หรือ Hook เพื่อให้ง่ายต่อการเทสต์
ตัวอย่าง Component และ Hook
// hooks/useFirebaseAuth.js
import { getAuth, onAuthStateChanged } from "firebase/auth";
import { useState, useEffect } from "react";

export function useFirebaseAuth() {
    const [user, setUser] = useState(null);

    useEffect(() => {
        const auth = getAuth();
        const unsubscribe = onAuthStateChanged(auth, setUser);
        return unsubscribe;
    }, []);

    return user;
}
Enter fullscreen mode Exit fullscreen mode
เทสต์ Hook ด้วย react-hooks-testing-library
import { renderHook } from "@testing-library/react";
import { useFirebaseAuth } from "./useFirebaseAuth";
import { getAuth, onAuthStateChanged } from "firebase/auth";

jest.mock("firebase/auth", () => ({
    getAuth: jest.fn(),
    onAuthStateChanged: jest.fn(),
}));

test("should set user when onAuthStateChanged is triggered", () => {
    const mockUser = { uid: "12345", email: "test@example.com" };
    onAuthStateChanged.mockImplementation((auth, callback) => {
        callback(mockUser);
        return jest.fn(); // Mock unsubscribe function
    });

    const { result } = renderHook(() => useFirebaseAuth());
    expect(result.current).toEqual(mockUser);
});
Enter fullscreen mode Exit fullscreen mode

3. การเขียน Integration Test

Integration Test จะทดสอบการทำงานระหว่าง React Component และ Firebase เช่น การแสดงผลข้อมูลจาก Firestore

ตัวอย่างการทดสอบ Firestore ด้วย Mock
import { render, screen } from "@testing-library/react";
import { collection, getDocs } from "firebase/firestore";
import MyComponent from "./MyComponent";

jest.mock("firebase/firestore", () => ({
    collection: jest.fn(),
    getDocs: jest.fn(),
}));

test("should display data from Firestore", async () => {
    const mockData = [{ id: "1", data: () => ({ name: "Item 1" }) }];
    getDocs.mockResolvedValue(mockData);

    render(<MyComponent />);
    const item = await screen.findByText("Item 1");
    expect(item).toBeInTheDocument();
});
Enter fullscreen mode Exit fullscreen mode
  • คุณสามารถ Mock การตอบกลับของ Firestore เพื่อให้เทสต์สามารถจำลองข้อมูลได้

4. การเขียน End-to-End Test

  • ใช้เครื่องมืออย่าง Cypress หรือ Playwright สำหรับการเทสต์ E2E
  • การตั้งค่า Firebase Emulator จะช่วยให้สามารถทดสอบการทำงานร่วมกับ Firebase ได้โดยไม่ต้องเชื่อมต่อกับโปรเจคจริง
การตั้งค่า Firebase Emulator
  1. ติดตั้ง Firebase CLI:
npm install -g firebase-tools
Enter fullscreen mode Exit fullscreen mode
  1. เปิด Emulator:
firebase emulators:start
Enter fullscreen mode Exit fullscreen mode
  1. กำหนดค่าให้ React ใช้ Emulator:
import { connectAuthEmulator } from "firebase/auth";
    import { connectFirestoreEmulator } from "firebase/firestore";

    const auth = getAuth();
    connectAuthEmulator(auth, "http://localhost:9099");

    const firestore = getFirestore();
    connectFirestoreEmulator(firestore, "localhost", 8080);
Enter fullscreen mode Exit fullscreen mode
ตัวอย่าง Cypress Test
describe("Authentication Flow", () => {
    it("should log in and display user dashboard", () => {
        cy.visit("/login");
        cy.get("input[name=email]").type("test@example.com");
        cy.get("input[name=password]").type("password123");
        cy.get("button[type=submit]").click();
        cy.url().should("include", "/dashboard");
        cy.contains("Welcome, test@example.com").should("be.visible");
    });
});
Enter fullscreen mode Exit fullscreen mode

สรุป

  1. แยกฟังก์ชัน Firebase ออกมาใน Utility หรือ Hook เพื่อให้ Mock และเทสต์ได้ง่าย
  2. ใช้ Mocking Library เช่น Jest เพื่อจำลอง Firebase SDK
  3. ตั้งค่า Firebase Emulator สำหรับการทดสอบในสภาพแวดล้อมที่ใกล้เคียงของจริง
  4. ใช้ E2E Test สำหรับกระบวนการที่เกี่ยวข้องกับผู้ใช้จริง เช่น การล็อกอินและดึงข้อมูล

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Imagine monitoring actually built for developers

Billboard image

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay