Блог

у меня есть компонент FilterInput, который будет принимать два запроса реквизитов и handle_input_change. это позволит фильтровать данные на основе значения в поле ввода.

я пишу модульный тест, чтобы проверить, фильтрует ли он данные на основе строки, введенной в поле ввода, используя библиотеку тестирования react, как показано ниже,

 const data_mock = () => {
    return {
        data: [
            {"id":2,"description":"S", "start date": "2019-03-2"},
            {"id":1,"description":"something","start date":"2013-06- 
            14T00:00:00 00:00",}
       ],
   };
  

};

 test('filters the description text', () => {
    const mock = data_mock();
   const handle_input_change = jest.fn();
   const {getByText} = render(
     <FilterInput query={""} on_handle_input_change={handle_input_change}> 
     </FilterInput>);
     const search_input_element = document.querySelector('.filter-input');
     fireEvent.change(search_input_element, {
         target: { value: 'something' },
     });
     const filtered_text = document.querySelector('.some > div:nth-of     - 
     type(1) > div:nth-of- 
     type(2)').textContent;
     const not_filtered_element = document.querySelector('.rdt_TableBody > 
     div:nth-of-type(2)');
     expect(not_filtered_element).toBeFalsy(); //this element should not be 
     //visible but is still present
 });
  

ниже приведен мой код,

 class App extends Component {
    const handle_input_change = (e) => {
         const query = e.target.value;
         this.setState(prevState => {
             const filtered_data = prevState.project_data.filter(element => 
             {
                 return 
             
            element.description.toLowerCase().includes(query.toLowerCase()) 
            || 
     
    element.project.toString().toLowerCase().includes(query.toLowerCase());
        });
        return {
            query,
            filtered_data
       }; 
   });
   return (
       <FilterInput query={this.state.input} on_handle_input_change= 
       {this.handle_input_change} />
   );
  

}

теперь проблема в том, что когда я запускаю тест, несмотря на то, что запрос указан в поле ввода, данные не фильтруются.

я не уверен, как имитировать метод on_handle_input_change для компонента FilterInput.

может кто-нибудь помочь мне исправить это. Спасибо.

   const {container} = render(
     <FilterInput query={""} on_handle_input_change={handle_input_change}> 
     </FilterInput>);
  

Вместо непосредственного использования документа вы можете использовать контейнер

  const search_input_element = container.querySelector('.filter-input');
 fireEvent.change(search_input_element, {
     target: { value: 'something' },
 });
  

Пожалуйста, попробуйте приведенный выше код.