在 React 中使用 jest.fn() 进行模拟获取

Question

我想知道为什么我需要将获取模拟逻辑放入我的测试中才能使其工作。

这是一个简单的例子：

使用 useEffect 内部的 fetch 进行测试的组件，并在响应后更新状态：

// Test.jsx

import React, {useEffect, useState} from 'react'

export const Test = () => {

    const [description, setDescription] = useState<string | null>(null)

    const fetchData = async () => {
        const response = await fetch('https://dummyendpoint/');
        const parsed = await response.json();
        const description = parsed.value;
        setDescription(description);
    }

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

    return (
        <div data-testid="description">
            {description}
        </div>
    )
};

export default Test;

测试逻辑：

// Test.test.js

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

import Test from "./Test";

global.fetch = jest.fn(() => Promise.resolve({
    json: () => Promise.resolve({
        value: "Testing something!"
    })
}));

describe("Test", () => {

    it('Should have proper description after data fetch', async () => {

        // need to put mock logic here to make it work

        render(<Test/>);
        const description = await screen.findByTestId('description');
        expect(description.textContent).toBe("Testing something!");
    });
})

如果我将 global.fetch 模拟保留在测试文件的顶部，我会不断收到错误：

TypeError: Cannot read property 'json' of undefined
at const parsed = await response.json();

Answer 1

确实很奇怪，它不能按原样工作。

但我能够通过将设置移动到beforeEach块中来修复它（我认为beforeAll也可以工作）。

备份全局变量值、覆盖它以进行测试并将其恢复是一种常见的模式。

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

import Test from "./Test";



describe("Test", () => {
    let originalFetch;

    beforeEach(() => {
        originalFetch = global.fetch;
        global.fetch = jest.fn(() => Promise.resolve({
            json: () => Promise.resolve({
                value: "Testing something!"
            })
        }));
    });

    afterEach(() => {
        global.fetch = originalFetch;
    });

    it('Should have proper description after data fetch', async () => {

        // need to put mock logic here to make it work

        render(<Test />);
        const description = await screen.findByTestId('description');
        expect(description.textContent).toBe("Testing something!");
    });
});