Тестовый ввод текста с реакцией и шутки

Question

У меня есть простой компонент SearchBar в небольшом тестовом проекте. Этот SearchBar состоит в основном из текстового ввода и кнопки , где кнопка click выполняет обратный вызов с текстом из поля ввода.

Моего Searchbar.render метод выглядит следующим образом:

return (
    <FormGroup controlId="keywords"> 
     <InputGroup> 
     <FormControl type="text" 
        placeholder="Keywords…" 
        value={this.state.keywords} 
        onChange={this.updateKeywords} /> 
     <InputGroup.Button 
      onClick={() => {this.props.onSearch(this.state.keywords);}} 
      ref="searchInput"> 
      <Button ref="searchButton"> 
      <Glyphicon glyph="search"/> 
      </Button> 
     </InputGroup.Button> 
     </InputGroup> 
    </FormGroup> 
); 

Я написал test для него с помощью шутя:

it("should adjust keywords and trigger onSearch correctly",() => { 
    const handleSearch = jest.fn(); 

    const searchBar = ReactTestUtils.renderIntoDocument(
    <Searchbar onSearch={handleSearch}/> 
); 
    expect(searchBar.state.keywords).toBe(""); 

    const button = ReactDOM.findDOMNode(searchBar.refs.searchButton); 
    const input = ReactDOM.findDOMNode(searchBar.refs.searchInput); 

    ReactTestUtils.Simulate.change(input, {target: {value: "test"}}); 

    ReactTestUtils.Simulate.click(button); 
    expect(handleSearch).toHaveBeenCalledWith("test"); 
}); 

Теперь обратный вызов в этом тесте работает и функция сохраняется в callMe получить лет как ожидалось. SearchBar также работает в моем приложении, поэтому я считаю, что код SearchBar верен. Но когда я использую npm test запускать мои тесты тесты не пройдены с:

expect(jest.fn()).toHaveBeenCalledWith(expected) 

Expected mock function to have been called with: 
    ["test"] 
But it was called with: 
    [""] 

В комментариях Andreas Köberle указал мне на проблему, которая появляется метод updateKeywords не назвать, которое должна быть причиной неисправного теста. К сожалению, я не могу понять, почему этот метод не вызывается в тесте.

Answer 1

Вы должны передать данные события самостоятельно, так как это действительно не вызывает событие на элементе DOM. Из документов:

Вы должны будете предоставить любое свойство события, которые вы используете в вашем компоненте (например KEYCODE, который, и т.д ...), как Реагировать не создает какие-либо из них для вас.

Общепринято просто включить функцию шпиона в качестве обратного вызова в ваш компонент и проверить это после имитации события.

const handleSearch = jest.fn(); 
const searchBar = ReactTestUtils.renderIntoDocument(
    <Searchbar onSearch={handleSearch}/> 
); 
ReactTestUtils.Simulate.change(input, {target: {value: 'test'}}); 
expect(handleSearch).toHaveBeenCalledWith('test')