我有一个组件，它使用react-table来显示一些数据。现在我试图写一个测试，它将测试是否在搜索字段中键入过滤表中的行或没有？但测试没有触发onchange事件，因此搜索没有执行。下面是示例代码（不是实际实现）我的组件和测试片段。我如何测试这个场景？有更好的方法来测试吗？
Here是代码的repo
data-table.tsx

import {
  flexRender,
  getCoreRowModel,
  getFilteredRowModel,
  getSortedRowModel,
  useReactTable,
  ColumnDef,
} from '@tanstack/react-table';
import { useMemo, useState } from 'react';
import { DebouncedInput } from './debounced-input';
import { Data, data } from './data';
export function DataTable() {
  const columns: Array<ColumnDef<Data>> = useMemo(
    () => [
      {
        accessorKey: 'id',
      },
      {
        accessorKey: 'name',
        cell({ row }) {
          return (
            <div className="border-0 rounded-md">
              <div className="p-3">
                <p className="break-all">{row.getValue('name')}</p>
              </div>
            </div>
          );
        },
      },
    ],
    []
  );
  const getRowId = (row: Data) => row.id ?? '';
  const [searchTerm, setSearchTerm] = useState('');
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    enableMultiRowSelection: false,
    getRowId,
    state: {
      globalFilter: searchTerm,
    },
  });

  return (
    <>
      <DebouncedInput
        data-testid="debounced-input"
        type="text"
        className="p-1 mr-2 mb-2"
        value={searchTerm}
        onChange={setSearchTerm}
        placeholder="Search"
      />
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
          </tr>
        </thead>
        <tbody>
          {table.getRowModel().rows?.length ? (
            table.getRowModel().rows.map((row) => (
              <tr className="cursor-pointer" key={row.id}>
                {row.getVisibleCells().map((cell) => (
                  <td key={cell.id}>
                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                  </td>
                ))}
              </tr>
            ))
          ) : (
            <tr>
              <td colSpan={columns.length} className="h-24 text-center">
                No Data
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </>
  );
}

字符串
data-table.spec.tsx

import { render, screen, act } from '@testing-library/react';
import { DataTable } from './data-table';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';

describe('Tests', () => {
  it('should have searched license in the grid when user type a term', async () => {
    const user = userEvent.setup();
    render(<DataTable />);
    await act(async () => {
      await user.type(screen.getByTestId('debounced-input'), 'john');
    });

    expect(screen.getByText(/john doe/i)).toBeInTheDocument();
    expect(screen.getByText(/jane doe/i)).not.toBeInTheDocument();
    //
  });
});

型