javascript - ไลบรารีทดสอบ React ไม่เคลียร์ฟอร์มอินพุตเมื่อจำลองเงื่อนไขการล้าง

ฉันมีโปรเจค UI การค้นหาที่มีคอมโพเนนต์สองส่วนแยกกัน: อย่างแรกคือคอมโพเนนต์การค้นหาด้วยตัวกรองที่มีฟอร์มป้อนข้อมูลเพื่อค้นหาตัวกรองที่ใช้ได้ และอีกอย่างคือคอมโพเนนต์ตัวกรองที่ใช้แสดงตัวกรองที่ใช้แล้วพร้อมตัวเลือกในการล้าง ฉันต้องการทดสอบพฤติกรรมใน jest ว่าเมื่อคลิกปุ่มล้างจากคอมโพเนนต์ตัวกรองที่ใช้แล้ว มันจะล้างข้อมูลในฟอร์มป้อนของคอมโพเนนต์การค้นหาด้วยตัวกรอง

ในโครงการนี้ ฉันมีตัวจัดการสถานะที่สังเกตการเปลี่ยนแปลงของตัวกรองและการล้างจะทำโดยการเรียกฟังก์ชัน useState เพื่อตั้งค่าค่าของอินพุตให้ว่างเมื่อมีการเปลี่ยนแปลงสถานะที่ตรงกับตัวกรองที่ไม่ได้เลือก มันทำงานได้ดีในการทดสอบด้วยตนเอง

เป้าหมายคือการเขียนการทดสอบเฉพาะสำหรับส่วนประกอบการค้นหาตัวกรองเท่านั้น แทนที่จะเรนเดอร์สองส่วนประกอบโดยการจำลองการเปลี่ยนแปลงสถานะของการอัปเดตตัวกรองเนื่องจากฉันไม่มีสิทธิ์เข้าถึงปุ่มล้าง แต่หลังจากการจำลองการเปลี่ยนแปลงสถานะและตรวจสอบให้แน่ใจว่าตัวกรองถูกยกเลิกเลือก กล่องอินพุตยังไม่ถูกล้างเหมือนที่ทำใน UI ที่คาดหวัง ฉันไม่รู้ว่าทำไมการเปลี่ยนแปลงสถานะของตัวกรองถึงไม่ล้างอินพุต เพราะมันล้างในเว็บไซต์ทดสอบ

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