模拟点击时出现getById is not a function错误求助

你犯了API混用的问题：React Test Renderer的TestRenderer.create()返回的实例并没有getById方法，这个查询方法是React Testing Library的render()函数提供的。你已经导入了render，但测试里错误用了TestRenderer创建组件，导致拿不到getById。

直接修改代码，统一使用React Testing Library的API：

import '@testing-library/jest-dom'
import * as React from 'react';
import { fireEvent, render } from "@testing-library/react";
import { jest } from '@jest/globals';

describe('parent component', () => {
    it('renders correctly', () => {
        const { asFragment } = render(<Component />);
        expect(asFragment()).toMatchSnapshot();
    });

    test('my click event', () => {
        const handleClick = jest.fn();
        // 用render替代TestRenderer.create，才能拿到getById
        const { getById } = render(<Component onClick={handleClick} />);
        
        const button = getById('component-div-id');
        fireEvent.click(button);
        
        expect(handleClick).toHaveBeenCalledTimes(1);
    });
});

关键修改说明： #

• 快照测试改用render返回的asFragment()生成快照，这是React Testing Library的标准快照方式。
• 点击测试完全替换为render创建组件，直接解构出getById查询方法。
• 可以删掉TestRenderer相关的导入，因为已经不再使用。

额外提醒：要确保你的<Component>内部确实把传入的onClick props绑定到了id为component-div-id的元素上，否则点击事件不会触发传入的handleClick。

内容的提问来源于stack exchange，提问作者RandomDeveloper