React/Jest 功能組件測試

Question

如何為我的函數組件編寫一個測試用例，該組件通過 API 調用返回加載數據？ 例如考慮下面的代碼：

//List of tasKs and process tasK information
const TaskList = props => {

/**Function to load data on component initialization */
    useEffect(() => {
        getData(true);
    }, []);

 /**
     * Function to pull tasks from database
     * @param {filters} applyfilter 
     */
    const getData = async applyfilter => {
        try {
            let taskData = await service.getTasks()
            taskData.tasks = taskData.tasks.sort(GFG_sortFunction)
            let status_data = taskData.tasks.filter(values => {
                if (statuses.includes(values.status_id)) {
                    return true
                }
            })

            setData(status_data);
            setT_Data(taskData.tasks);
            setshowGenerateDPF(true);
            builtFilter(taskData.tasks);
            if ((selectedPlatforms.length !== 0 || selectedAssets.length !== 0 || selectedCategories.length !== 0 || selectedStatus.length !== 0) && applyfilter)
                FilterTasksData(selectedPlatforms, selectedAssets, selectedCategories, selectedStatus, taskData.tasks);
        }
        catch (err) {
            throw err;
        }
    };
 return (
        <>
            <Row>
                <div data-testid="tasklist" style={{ float: "left", padding: "0" }} className={[classes.taskList, "col-md-8"].join(' ')}>
                    <span style={{ float: "left" }}>
                        {tasks.length} Tasks </span>
</div>
</Row>
</>
}

我想為getData方法編寫單元測試用例。 我怎樣才能做到這一點？

Answer 1

您可能想要模擬響應和其他功能（例如setData ）

這是一個使用“react testing library”模擬獲取請求的隨機示例，該示例使用測試 id 呈現 div，該測試 id 從請求中輸出文本數據

import YourComponent from '../'
import React from 'react';
import '@testing-library/jest-dom/extend-expect';
import { render, waitForElement } from '@testing-library/react';

describe('59892259', () => {
  let originFetch;
  beforeEach(() => {
    originFetch = (global as any).fetch;
  });
  afterEach(() => {
    (global as any).fetch = originFetch;
  });
  it('should pass', async () => {
    const fakeResponse = { data: 'example data' };
    const mRes = { json: jest.fn().mockResolvedValueOnce(fakeResponse) };
    const mockedFetch = jest.fn().mockResolvedValueOnce(mRes as any);
    (global as any).fetch = mockedFetch;
    const { getByTestId } = render(<YourComponent />);
    const div = await waitForElement(() => getByTestId('test'));
    expect(div).toHaveTextContent('example data');
    expect(mockedFetch).toBeCalledTimes(1);
    expect(mRes.json).toBeCalledTimes(1);
  });
});

您可以編寫一個測試，期望將“{tasks.length} Tasks”的文本視為您模擬的任何內容，只需確保在您的測試環境中模擬或導入全局存儲（redux/mobx）或掛鈎，這樣您就可以也可以模擬方法調用