How to write tests

// stringify.test.js

// 对于给定输入判断输出，以测试 `stringify` 为例
describe("JSON.stringify basic type", () => {
    //describe：创造一个块，将一组相关的测试用例组合在一起
    it("works with boolean", () => {
        // it: 测试用例  (test 别名)
        const result = JSON.stringify(true);
        expect(result).toBe("true"); // expect：断言某个值，条件(matcher)不成立则测试不通过
        expect(result).not.toBe(true); // not: 否定判断
    });

    // ... 多组 it
});

test("the data is ok", async () => {
    expect.assertions(1); // assertions 会确保断言数量
    const data = await fetchData();
    expect(data).toBe("ok");
});

test("the fetch fails with an error", async () => {
    await expect(fetchData()).rejects.toMatch("error"); // 必须 await,否则测试会提前结束
});

test("the data is ok", (done) => {
    // 调研 done 结束测试
    fetchData((error, data) => {
        if (error) {
            done(error); // 测试失败
        } else {
            try {
                expect(data).toBe("ok");
                done(); // 测试成功
            } catch (error) {
                done(error); // 测试失败, 此处try catch，否则 expect失败后会超时错误
            }
        }
    });
});

import { renderHook } from "@testing-library/react";
// import { renderHook } from '@testing-library/react-hooks' // old version

/**
 * a hook
 */
const useTestHook = () => {
    const [name, setName] = React.useState("");
    React.useEffect(() => setName("Test"), []);
    return name;
};

test("render useTestHook", () => {
    const { result } = renderHook(useTestHook); // renderHook 返回值中 result 指向返回值的ref
    expect(result.current).toBe("Test"); // result.current 为当前值
});

const useTestProps = (value) => {
    const [name, setName] = React.useState("");
    React.useEffect(() => setName((n) => `${n} ${value}`), [value]);
    return name;
};
test("returns useTestProps", () => {
    const { result, rerender } = renderHook(useTestProps, {
        initialProps: "Test", // provide init render value
    });
    expect(result.current).toBe(" Test");
    rerender("NewValue"); // rerender with new value
    expect(result.current).toEqual(" Test NewValue");
});

import React from "react";
// React Testing Library Version>= 13.0
import { act, waitFor, renderHook } from "@testing-library/react";

const useTestPromise = () => {
    const [name, setName] = React.useState("");
    return {
        name,
        // a function to update date async
        updateAsyc: (v) => {
            Promise.resolve().then(() => setName(v));
        },
    };
};

test("returns useTestPromise", async () => {
    // async 异步函数
    const { result } = renderHook(useTestPromise);
    expect(result.current.name).toBe(""); // 检查初始值

    // act 包裹异步状态更新，否则可能状态无法更新或者react warning
    await act(async () => {
        result.current.updateAsyc("Test"); // 调用异步更新操作
        await waitFor(() => !!result.current.name); // 等待更新
    });
    expect(result.current.name).toEqual("Test");
});

import React from "react";
// React Hooks Testing Library (old version)
import { renderHook } from "@testing-library/react-hooks";

const useTestPromise = () => {
    const [name, setName] = React.useState("");
    return {
        name,
        updateAsyc: (v) => Promise.resolve().then(() => setName(v)),
    };
};

test("returns useTestPromise", async () => {
    // async 异步函数
    const { result, waitForNextUpdate } = renderHook(useTestPromise);
    expect(result.current.name).toBe(""); // 检查初始值
    result.current.updateAsyc("Test");
    await waitForNextUpdate(); // 等待异步值更新
    expect(result.current.name).toEqual("Test");
});