Как выполнить модульное тестирование обработчика событий реакции, который содержит history.push, используя Jest и Enzyme? - PullRequest
Новая
       13

Как выполнить модульное тестирование обработчика событий реакции, который содержит history.push, используя Jest и Enzyme?

0 голосов
/ 04 июня 2018

Имеется простой компонент: 

export default class SearchForm extends Component {
  constructor(props) {
    super(props)
    this.state = { query: '' }
  }
  onSubmit = (event) => {
    event.preventDefault()
    history.push(`/results/${this.state.query}`, { query: this.state.query })
  }
  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <input
          type="text"
          value={this.state.query}
          onChange={event => this.setState({ query: event.target.value })}
        />
        <button>Search</button>
      </form>
    )
  }
}

И тест: 

describe('SearchForm Component', () => {
  it('should navigate to results/query when submitted', () => {
    const wrapper = shallow(<SearchForm />)
    ...?
  })
})

Как проверить, что отправка формы приводит пользователя на следующую страницу с правильным значением запроса?

Я пытался просто высмеять обработчик onSubmit и хотя бы подтвердить, что он был вызван, но это приводит к ошибке безопасности из-за history.push. 

const wrapper = shallow(<SearchForm />)
const mockedEvent = { target: {}, preventDefault: () => {} }
const spy = jest.spyOn(wrapper.instance(), 'onSubmit')
wrapper.find('form').simulate('submit', mockedEvent)
expect(spy).toHaveBeenCalled()

Ответы [ 2 ]

0 голосов
/ 04 июня 2018

На самом деле все просто, вы можете передать любой реквизит компоненту при мелкой визуализации его внутри теста, например:
const wrapper = shallow(<SearchForm history={historyMock} />)

Кстати, внутри onSubmit вы должнывызовите как this.props.history.push(...).

Теперь, чтобы создать макет (подробнее в документации ), вы можете написать в тесте так:
const historyMock = { push: jest.fn() };

Имейте в виду, что вы на самом деле издеваетесь только над методом push объекта history. Если вы используете больше методов внутри компонента и хотите их протестировать, вы должны создать макет для каждого тестируемого.

И затем вам нужно утверждать, что макет push был вызван правильно.Для этого вы пишете необходимое утверждение:
expect(historyMock.push.mock.calls[0]).toEqual([ (url string), (state object) ]);
Используйте необходимые (url string) и (state object) для подтверждения.

0 голосов
/ 04 июня 2018

издевайся!

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

...