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

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

// 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;
}

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

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

npm install -g firebase-tools

firebase emulators:start

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

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