I’m using React and learning writing tests.
The app runs totally well, I can select the option to search the specific column, or select “any column” to search globally.

But I’m facing the problem in the test, I seem can select the column, and also give the keyword, but the result is always wrong. Seems the selected column doesn’t work.

Could anyone give me some help? I’ve been stocked here for a long time… or does unit test not work like this?

 return (
    <>
      <div className='mt-1 overflow-y-hidden rounded-md border-slate-200'>
        <div className='mb-4 flex items-center'>
          <span className='whitespace-nowrap'> Search Table: </span>
          <div>
            <select
              onChange={handleValueChange}
              data-testid='select-column'
              className='ml-7 mr-1 h-12 w-60 rounded border-slate-300 text-base focus:border-4 focus:border-blue-500'
            >
              <option defaultValue='' disabled>
                Column
              </option>
              <option value='any' className='text-gray-500' data-testid='select-any-column'>
                Any Column
              </option>
              {table.getAllColumns().map((column) => (
                <option key={column.id} value={column.id} className='text-gray-500' data-testid={column.id}>
                  {snakeCaseToTitleCase(column.id)}
                </option>
              ))}
            </select>
          </div>
          <input
            type='text'
            placeholder='Keywords'
            value={globalFilter}
            onChange={(e) => setGlobalFilter(e.target.value)}
            className='ml-4 mr-2 h-12 rounded border p-1 text-gray-400 placeholder:text-gray-600 focus:text-black'
            data-testid='input-keywords'
          />
        </div>
        <ScrollArea className='h-[550px] w-max drop-shadow'>
          <Table>

            <TableHeader 
              className='sticky top-0 z-10 w-fit pr-4 text-sm font-medium leading-snug text-slate-50'
            >
              {table.getHeaderGroups().map((headerGroup) => (
                <TableRow key={headerGroup.id}>
                  {headerGroup.headers.map((header) => {

                    return (
                      <TableHead
                        key={header.id}
                        className=' bg-sky-500 p-0 text-left text-white'
                        style={{ paddingLeft: '0.2rem' }} 
                      >
                        {header.isPlaceholder
                          ? null
                          : flexRender(
                            header.column.columnDef.header,
                            header.getContext()
                          )}
                      </TableHead>
                    )
                  })}
                </TableRow>
              ))}
            </TableHeader>

            <TableBody className='cursor-pointer bg-white text-sm'>
              {table.getRowModel().rows?.length ? (
                table.getRowModel().rows.map((row) => (
                  <TableRow
                    key={row.id}
                    data-state={row.getIsSelected() && 'selected'}
                    className='border-b border-slate-200 last:border-b-0 hover:bg-slate-100'
                  >
                    {row.getVisibleCells().map((cell) =>
                    
                      (
                        <TableCell key={cell.id} 
                          className='truncate p-0 text-left'
                          style={{ paddingLeft: '0.2rem' }} 
                        >
                          {flexRender(
                            cell.column.columnDef.cell,
                            cell.getContext()
                          )}
                        </TableCell>
                      ))
                    }
                  </TableRow>
                ))
              ) : (
                <TableRow>
                  <TableCell
                    colSpan={columns.length}
                    className='p-0 text-center'
                  >
                    No results.
                  </TableCell>
                </TableRow>
              )}
            </TableBody>

          </Table>
        </ScrollArea>
      </div>
      <DataTablePagination table={table} />
    </>
  )

//my test
const data: SampleData[] = [
  { name: 'Alice', age: 20, address: 'Smith Street 20' },
  { name: 'Ben Smith', age: 12, address: 'My Street 35' },
  { name: 'Kevin Smith', age: 34, address: 'No Sreet 12' },
]


describe('DataTable', () => {
  test('column selector on Name', async() => {
    render(<DataTable columns={columns} data={data} />)
    
    const selectElement = screen.getByTestId('select-column') as HTMLSelectElement
    const input = screen.getByTestId('input-keywords')
    const rows = screen.getAllByRole('row')

    fireEvent.change(selectElement, { target: { value: 'name' } })
    expect(selectElement.value).toBe('name')

    fireEvent.change(input, { target: { value: 'Smith' } })
    expect(rows.length).toBe(3) // I expect to have "one table header + two results", but the testing also toBe(4), which means it search all columns.
  })

})