I have a search UI project with two separate components: one is a filter search component with the input form to search for applicable filter and the other is an applied filter component showing the applied filter with the option to clear. I want to test the behavior in jest that when clicking on the clear button from the applied filter component it clears the form input in the filter search component.

In the project, I have a state manager which observes the filters change and the clearing is done by calling a useState function to set the input value to empty when there is a state change with a matching, deselected filter. It works okay in manual tests.

The goal is to write the test only for the filter search component rather than rendering two components by simulating the state change of the filters update since I don't have access to the clear button. But after mocking the state change and making sure that the filter is deselected, the input box does not clear like it does in the expected UI. I don't know why the state change for the filter isn't clearing the input because it does clear on the test site.

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('');
});