Jest 反应测试：API 调用失败 TypeError：无法读取未定义的属性（读取“json”）

Question

我将通过 jest 和 React 测试库测试下面的组件。

我想测试按下按钮时API是否被正常调用，所以我把API调用部分做了mock。

但是出现这个错误。

console.log
  API call failed TypeError: Cannot read properties of undefined (reading 'json')

我尝试过，因为有人建议从 wait response.json() 中删除 .json() 部分；但未能解决错误。

以下是详细代码。

MyButton.js

const MyButton= ({incrementFn, decrementFn}) => {
    const apiFunction = async() => {
        const dataToSend = { key: 'value' };
        try {
            const response = await fetch('https://api.example/data', {
                method: 'POST',
                headers: {
                  'Content-Type': 'application/json',
                },
                body: JSON.stringify(dataToSend),
              });
            const data = await response.json();
            console.log(data);
            return data;
          } catch (error) {
            console.log('API call failed', error);
          }
    };

    return (
        <div>
            <button onClick={apiFunction} data-testid="apiButton">API</button>
            <h1>value</h1>
        </div>
    )
};

export default MyButton;

按钮.test.js

import {render, screen, fireEvent, waitFor} from '@testing-library/react'
import MyButton from './MyButton'

const fakeData = {
    name: "Joni Baez",
    age: "32",
    address: "123, Charming Avenue"
  };

global.fetch = jest.fn().mockImplementation(()=>{
    Promise.resolve({
        ok: true, 
        json: () => Promise.resolve(fakeData),
    })
});


afterEach(() => {
    jest.clearAllMocks();  
});

describe('<MyButton/>', () => {
    it('calls API mock', async () => {
        render(<MyButton/>);

        const apiButton = screen.getByTestId('apiButton');
        fireEvent.click(apiButton);
        
        await waitFor(() => expect(fetch).toHaveBeenCalledTimes(1));

        expect(fetch).toHaveBeenCalledWith('https://api.example/data', expect.objectContaining({
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
        }));
    })
})

Answer 1

您遇到了错误，因为当触发 apibutton 单击时，正在尝试执行实际的 fetch 函数，而不是模拟。

要正确实现模拟，您应该为按钮组件创建文件 -> 一个用于渲染 UI (index.jsx)，另一个用于处理功能 (ButtonHandler.jsx)。然后，您可以将函数作为 props 从处理程序传递到索引。因此，当您渲染索引时，您可以将按钮功能替换为模拟功能。