проблема с fireevent в react-testing-library

#reactjs #react-testing-library

Вопрос:

Я использую react-testing-library для своего приложения react. В одном тестовом примере мне нужно заполнить некоторое значение в текстовом поле и вывести фокус.

Вот тестовый скрипт —

 it('searchbox wrapper',async()=>{
    let wrapper=getSearchBoxWrapperInstance('')
    let inputBox=wrapper.findByTestId('inputText');
    inputBox.value='12345';
    fireEvent(inputBox,'focusOut');

})

При запуске тестового примера я получаю следующую ошибку —

 TypeError: element.dispatchEvent is not a function

  79 |     let inputBox=wrapper.findByTestId('inputText');
  80 |     inputBox.value='12345';
> 81 |     fireEvent(inputBox,'focusOut');
     |     ^
  82 |     //fireEvent('Blur',
  83 | 
  84 |     //await (() => wrapper.getByText('')))

  at fireEvent (node_modules/dom-testing-library/dist/events.js:533:18)

Пожалуйста, дайте мне знать, если я могу предоставить дополнительную информацию

Ответ №1:

Я предполагаю getSearchBoxWrapperInstance , что возвращает результат render .

Попробуйте, работает ли это:

 it('searchbox wrapper',async()=>{
  let wrapper=getSearchBoxWrapperInstance('')
  let inputBox=wrapper.findByTestId('inputText');
  fireEvent.change(inputBox, { target:  { value: '12345' } });
  fireEvent.focusOut(inputBox);
  // In alternative you could try fireEvent.blur
})

Также возможно, что findByTestId ваш элемент не найден. Попробуйте выйти из системы, чтобы узнать, так ли это, или используйте getByTestId какие ошибки, если элемент не найден.

1. Сейчас я получаю эту ошибку — «У данного элемента нет параметра для установки значения», в этой строке — fireEvent.change(InputBox, { target: { value: ‘1234567’ } });

2. Вы уверены inputBox , что это то, чего вы ожидаете?

3. Есть ли способ распечатать журнал с использованием этой библиотеки… Я не смог найти достаточно документов по этому вопросу

4. const { debug } = render() по умолчанию, если вы вызовете debug() , вы получите распечатанный весь DOM. Вы также можете debug(inputBox)

Ответ №2:

 // import ing userevent
import userEvent from '@testing-library/user-event';
// detecting the input in component by the placeholder name
const input = screen.queryByPlaceholderText('input placeholder 
name');
// entering data in the userEvent
userEvent.type(input,'typing some value into the input');
// invoking blur functiuonality.
fireEvent.blur(input);