React 测试错误：未捕获 [TypeError：无法读取未定义的属性“地图”]

Question

所以我正在测试一个组件，该组件使用我制作的名为“useFetch”的自定义钩子。我尝试为组件模拟 useFetch，然后我的组件中的 .map 调用给了我错误：错误：未捕获 [TypeError：无法读取未定义的属性“地图”]

这是我第一次为我的项目编写测试，所以我确定我在这里做错了什么，不知道如何继续。有没有办法通过我的组件的初始渲染？

useFetch.js

import React, { useState, useEffect } from 'react';
import { useAuth } from '../context/AuthContext';
import firebase from '../firebase'

const useFetch = () => {
    const [timerData, setTimerData] = useState({
        error: null,
        loading: true,
        timerList: []
    });
    const { getUuid } = useAuth();

    useEffect(() => {
        const unsubscribe = firebase
            .firestore()
            .collection('users')
            .doc(getUuid())
            .collection('timers')
            .onSnapshot((snapshot) => {
                const newTimers = snapshot.docs.map((doc) => ({
                    ...doc.data(),
                    id: doc.id
                }))
                newTimers.sort(function (x, y) {
                    return x.timerHistory[0].timeStamp - y.timerHistory[0].timeStamp;
                })
                setTimerData({
                    error: null,
                    loading: false,
                    timerList: newTimers
                },
                    (error) => {
                        setTimerData({
                            error,
                            loading: false,
                            timerList: []
                        })
                    }
                )
            })
        return () => unsubscribe();
    }, [])
    return timerData;
}

export default useFetch;

我正在测试的组件：TimerList.js

import ToggleableTimerForm from "./ToggleableTimerForm";
import TimerController from "./TimerController";
import useFetch from "../../hooks/useFetch";

const TimerList = () => {
    const { error, loading, timerList } = useFetch();
    return (
                <div className="timerlist column">
                    <ul className="row timerGrid">
                        {timerList.map(timer => {
                            return (<TimerController timer={timer} key={timer.id} />)
                        })}
                        <ToggleableTimerForm />
                    </ul>
                </div>
    );
}

export default TimerList;

我的测试：TimerList.test.js

import React from "react";
import TimerList from "../TimerList";
import { render, fireEvent, screen, cleanup } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";

jest.mock("../../../hooks/useFetch", () => ({
    __esModule: true,
    default: () => ({
        timerData: {
            error: null,
            loading: true,
            timerList: [{
                id: "fakeid",
                name: "timer1"
            }]
        }
    }),
}));

jest.mock('../../../firebase', () => ({
    firebase: {
        firestore: jest.fn(() => ({})),
    },
}));

describe('<TimerList />', () => {
    it('renders the initial <TimerList />', () => {
        const { queryByTestId } = render(
                <TimerList />
        );
    });
});

编辑：通过按照 tromgy 的建议更改我的模拟的形状来解决这个问题。

jest.mock("../../../hooks/useFetch", () => ({
    __esModule: true,
    default: () => ({
        error: "",
        loading: false,
        timerList: []
    }),
}));

Answer 1

我认为问题在于模拟函数返回的对象的形状与真正的 useFetch 的形状。

真正的函数返回：

{
  error: string, // that's an assumption
  loading: bool,
  timerList: Array
}

当模拟函数返回时：

{
  timerData: {
    error: string,
    loading: bool,
    timerList: Array
  }
}