Tengo un proyecto de interfaz de usuario de búsqueda con dos componentes separados: uno es un componente de búsqueda de filtro con el formulario de entrada para buscar el filtro aplicable y el otro es un componente de filtro aplicado que muestra el filtro aplicado con la opción de borrar. Quiero probar el comportamiento en broma de que al hacer clic en el botón Borrar del componente de filtro aplicado, borra la entrada del formulario en el componente de búsqueda de filtro.

En el proyecto, tengo un administrador de estado que observa el cambio de filtros y la limpieza se realiza llamando a una función useState para establecer el valor de entrada en vacío cuando hay un cambio de estado con un filtro no seleccionado coincidente. Funciona bien en las pruebas manuales.

El objetivo es escribir la prueba solo para el componente de búsqueda de filtros en lugar de representar dos componentes simulando el cambio de estado de la actualización de filtros, ya que no tengo acceso al botón Borrar. Pero después de burlarse del cambio de estado y asegurarse de que el filtro no esté seleccionado, el cuadro de entrada no se borra como lo hace en la interfaz de usuario esperada. No sé por qué el cambio de estado del filtro no borra la entrada porque sí se borra en el sitio de prueba.

 it('clears input when old filters are removed', async () => { mockAnswersActions({ setFilterOption, setOffset, executeFilterSearch: jest.fn().mockResolvedValue(labeledFilterSearchResponse) }); render(<FilterSearch searchFields={searchFieldsProp} />); const searchBarElement = screen.getByRole('textbox'); userEvent.type(searchBarElement, 'first name 1'); await waitFor(() => expect(screen.findByText('first name 1'))); userEvent.type(searchBarElement, '{arrowdown}{enter}'); await waitFor(() => { expect(setFilterOption).toBeCalledWith({ fieldId: 'name', matcher: Matcher.Equals, value: 'first name 1', displayName: 'first name 1', selected: true }); }) actions.setFilterOption({ fieldId: 'name', matcher: Matcher.Equals, value: 'first name 1', displayName: 'first name 1', selected: false }) await waitFor(() => { expect(setFilterOption).toBeCalledWith({ fieldId: 'name', matcher: Matcher.Equals, value: 'first name 1', displayName: 'first name 1', selected: false }); }) expect(searchBarElement).toHaveValue(''); });