getById 不是 function

Question

当我尝试模拟点击时，主题行中出现错误。

我的整个测试文件：

import '@testing-library/jest-dom'

import * as React from 'react';

import TestRenderer, {act} from 'react-test-renderer';
import { fireEvent, render } from "@testing-library/react";
import {jest} from '@jest/globals';

describe('parent component', () => {
    const component = TestRenderer.create(
        <Component/>,
      );
    it('renders correctly', () => {
        let tree = component.toJSON();
        expect(tree).toMatchSnapshot();
    });
    test('my click event', () => {
    const handleClick = jest.fn();
    const { getById } = TestRenderer.create(
        <Component onClick={handleClick}/>,
      );
    const button = getById('component-div-id');
    fireEvent.click(button);
    expect(handleClick).toHaveBeenCalledTimes(1);
    });
});

该错误专门指向getById ：

类型错误：getById 不是 function

  28 |         <Component onClick={handleClick}/>,
  29 |       );
> 30 |     const button = getById('component-div-id');

Answer 1

ChatGPT 似乎有答案，这是获取组件测试 ID 的正确方法并且似乎对我有用：

import { render, getByTestId } from '@testing-library/react';

const { container } = render(<MyComponent />);
const element = getByTestId(container, 'my-element-test-id');

Answer 2

看起来您正在组合两个不同的测试库， TestRenderer没有名为 getById 的方法，但是反应测试库确实有一个名为getByTestId的方法，它将查找具有属性data-testid的元素。

例如，如果你有这样一个 div：

<div data-testid="component-div-id">A div</div>

做这个

import { fireEvent, render } from "@testing-library/react";

const { getByTestId } = render (
    <Component onClick={handleClick}/>,
);
// Do the assertions
const button = getByTestId('component-div-id');
fireEvent.click(button);

如果您想按实际的 id 属性查看，例如：

<div id="component-div-id">A div</div>

你必须这样做：

import { fireEvent, render } from "@testing-library/react";

const component = render (
    <Component onClick={handleClick}/>,
);
// Do the assertions
const button = component.container.querySelector('#component-div-id');
fireEvent.click(button);