无法读取未定义的属性（读取“回调”）

Question

因此，我尝试在单个 spa 应用程序中将 react 17 更新为 react 18，这在更新之前可以正常工作，但是现在运行测试时出现错误，这是发生错误的代码，特别是在listener.callback(data) ：

export function fireReaderEvent<K extends keyof WNReaderEventMap>(
  event: K,
  data: Partial<WNReaderEventDataMap[K]> = {}
) {
  const listener = eventListeners.find((l) => l.event === event);
  listener.callback(data);
}

这是测试，错误是在第一次调用 act() 中的 fireReaderEvent function 调用时触发的：

it("should execute the reader event callbacks", async () => {
    const onLaunchedMock = jest.fn();
    const onReaderErrorMock = jest.fn();
    const onSaveMock = jest.fn();
    const onSegmentCompleteMock = jest.fn();
    const onSegmentContinueMock = jest.fn();
    const onSegmentNavigationChangeMock = jest.fn();
    const onSegmentReadyMock = jest.fn();
    const onSegmentStateChangeMock = jest.fn();
    const onTakeCompleteMock = jest.fn();
    const onTakeStateChangeMock = jest.fn();
    const onTakeSubmitCompleteMock = jest.fn();
    const onTokenExpiredMock = jest.fn();
    const onAnswerExplanationAvailableMock = jest.fn();
    const onAnswerExpVisibilityChangedMock = jest.fn();
    const onFeedbackVisibilityChangedMock = jest.fn();
    const onSlideoutPanelChangeMock = jest.fn();

    render(
      <Player
        {...args}
        onLaunched={onLaunchedMock}
        onReaderError={onReaderErrorMock}
        onSave={onSaveMock}
        onSegmentComplete={onSegmentCompleteMock}
        onSegmentContinue={onSegmentContinueMock}
        onSegmentNavigationChange={onSegmentNavigationChangeMock}
        onSegmentReady={onSegmentReadyMock}
        onSegmentStateChange={onSegmentStateChangeMock}
        onTakeComplete={onTakeCompleteMock}
        onTakeStateChange={onTakeStateChangeMock}
        onTakeSubmitComplete={onTakeSubmitCompleteMock}
        onTokenExpired={onTokenExpiredMock}
        onAnswerExplanationAvailable={onAnswerExplanationAvailableMock}
        onAnswerExpVisibilityChanged={onAnswerExpVisibilityChangedMock}
        onFeedbackVisibilityChanged={onFeedbackVisibilityChangedMock}
        onSlideoutPanelChange={onSlideoutPanelChangeMock}
      />
    );
    await waitFor(() => expect(getReaderElement()).toBeInTheDocument());

    const segmentId = defaultLaunchData.segments[0].id;
    act(() => {
      fireReaderEvent("launched", defaultLaunchData);
      fireReaderEvent("segmentReady", { segmentId });
      fireReaderEvent("readerError", {});
      fireReaderEvent("save", {});
      fireReaderEvent("segmentComplete", {});
      fireReaderEvent("segmentContinue", { segmentId });
      fireReaderEvent("segmentNavigationChange", { segmentId });
      fireReaderEvent("segmentStateChange", { segmentId, components: [] });
      fireReaderEvent("takeComplete", {});
      fireReaderEvent("takeStateChange", {
        components: [],
        totalsBySegment: [],
      });
      fireReaderEvent("takeSubmitComplete", {});
      fireReaderEvent("tokenExpired", {});
      fireReaderEvent("answerExplanationAvailable", {});
      fireReaderEvent("answerExplanationVisibilityChanged", {});
      fireReaderEvent("feedbackVisibilityChanged", {});
      fireReaderEvent("showSlideoutPanel");
      fireReaderEvent("closeSlideoutPanel");
    });

    expect(onLaunchedMock).toHaveBeenCalled();
    expect(onSegmentReadyMock).toHaveBeenCalled();
    expect(onReaderErrorMock).toHaveBeenCalled();
    expect(onSaveMock).toHaveBeenCalled();
    expect(onSegmentCompleteMock).toHaveBeenCalled();
    expect(onSegmentContinueMock).toHaveBeenCalled();
    expect(onSegmentNavigationChangeMock).toHaveBeenCalled();
    expect(onSegmentStateChangeMock).toHaveBeenCalled();
    expect(onTakeCompleteMock).toHaveBeenCalled();
    expect(onTakeStateChangeMock).toHaveBeenCalled();
    expect(onTakeSubmitCompleteMock).toHaveBeenCalled();
    expect(onTokenExpiredMock).toHaveBeenCalled();
    expect(onAnswerExplanationAvailableMock).toHaveBeenCalled();
    expect(onAnswerExpVisibilityChangedMock).toHaveBeenCalled();
    expect(onFeedbackVisibilityChangedMock).toHaveBeenCalled();
    expect(onSlideoutPanelChangeMock).toHaveBeenCalledTimes(2);
  });

并且列表eventListeners在每个测试之前填充，如下所示：

    export function createReaderMock(props?: Partial<WNReaderInstance>) {
  window.WNReader = jest.fn<WNReaderInstance, [string, WNReaderSettings?]>(
    () => {
      eventListeners = [];

      const addListener: WNReaderInstance["addListener"] = jest.fn(
        (event, callback) => eventListeners.push({ event, callback })
      );

      return {
        addListener,
        launch: jest.fn(),
        save: jest.fn(),
        destroy: jest.fn(),
        reset: jest.fn(),
        resetToken: jest.fn(),
        goToSegment: jest.fn(),
        goToNextSegment: jest.fn(),
        goToPrevSegment: jest.fn(),
        submitSegment: jest.fn(),
        submitTake: jest.fn(),
        checkAnswers: jest.fn(),
        togglePanel: jest.fn(),
        getCurrentPathInfo: jest.fn(),
        filterClassReviewResultsByStudentIds: jest.fn(),
        closeFeedback: jest.fn(),
        showFeedback: jest.fn(),
        showAnswerExplanation: jest.fn(),
        removeListener: jest.fn(),
        showCalculator: jest.fn(),
        getHighlights: jest.fn(),
        clearHighlights: jest.fn(),
        getSelectedText: jest.fn(),
        setHighlighterColor: jest.fn(),
        playTextToSpeech: jest.fn(),
        pauseTextToSpeech: jest.fn(),
        setTextToSpeechVoiceSpeed: jest.fn(),
        toggleToolsSlideOut: jest.fn(),
        turnShowAnswersOn: jest.fn(),
        turnShowAnswersOff: jest.fn(),
        getTranslationLanguage: jest.fn(),
        setTranslationLanguage: jest.fn(),
        getTranslationLanguageList: jest.fn(),
        isTextToSpeechSupported: jest.fn(),
        setTextToSpeechLanguage: jest.fn(),
        ...props,
      };
    }
  );
}

版本：

"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^13.4.0",
"@testing-library/react-hooks": "^8.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-query": "^3.39.2"