React Router: протестируйте компонент, который программно отправляет в историю реагирования маршрутизатора при отправке формы.

Новое в реакции-маршрутизаторе и проблемы с тестами Jest/Enzyme, не пройденными из-за поддержки истории реакции-маршрутизаторов.

Идея:

При отправке компонента формы вызовите handleSubmit. handleSubmit вызывает validate для простой проверки формы. Если подтверждено history.push('/new-url-to-navigate-to') Иначе, если не подтверждено, помещает сообщение об ошибке в состояние.

Идея работает при запуске проекта — допустимая отправка формы переходит к компоненту /sent, как и ожидалось.

Все идет нормально.

Проблема

Моя проблема связана с моим модульным тестом jest/enzyme, чтобы проверить, отображает ли компонент сообщение об ошибке при сбое проверки. Код теста:

import React from 'react'
import { mount } from 'enzyme'
import { MemoryRouter } from 'react-router-dom'
import Form from '../Form'

describe('<Form />', () => {
  it('validates invalid form', () => {
    const component = mount(
      <MemoryRouter
        initialEntries={["/", "/form", "/saved"]}
        initialIndex={1}
      >
        <Form />
      </MemoryRouter>
    )
    const input = component.find('input')
    input.value = ""
    const form = component.find('form')

    form.simulate('submit', { preventDefault: () => {},
    target: {
      routingTextbox: input
    }});
    expect(component.find('h3').length).toBe(1)
  })
})

Что не удается с:

<Form /> › validates invalid form

    TypeError: Cannot read property 'push' of undefined

      48 | 
      49 |     if (isValid) {
    > 50 |       history.push('/sent')

Ошибка препятствует запуску теста и завершается сбоем. Если я удалю/прокомментирую строку history.push('/sent'), тест пройдет, но мне, очевидно, нужна эта строка для перехода на следующую страницу (поскольку я говорю, что это работает при запуске проекта - это просто тест, который терпит неудачу Кажется, у меня нет доступа к реквизиту истории в моем компоненте Любая помощь в том, как двигаться вперед с этим, будет принята с благодарностью.

Компонент формы для справки

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

// Form component
import React, { useState } from 'react';

const Form = ({ history }) => {

  const [state, setState] = useState({
    error: {
      isValid: true,
      message: ''
    }
  })

  const handleClick = () => {
    history.goBack()
  }

  const renderError = () => {
    if (state.error.isValid === false) {
      return(
        <div>
          <h3>{state.error.message}</h3>
        </div>
      )
    }

    return null
  }

  const validate = (value) => {
    if (value === "") {
      setState({
        error: {
          isValid: false,
          message: 'Please enter a value in the textbox'
        }
      })
      return false
    }

    return true
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    const isValid = validate(e.target.routingTextbox.value)

    if (isValid) {
      history.push('/sent')
    } else {
      console.log('textbox is empty')
    }
  }

  return ( 
    <form onSubmit={handleSubmit}>
      <input type="text" name="routingTextbox" />
      <button type="submit">Submit</button>
      <button type="button" onClick={handleClick}>Go Back</button>
      {renderError()}
    </form>
  )
}

export default Form

Маршрутизатор для справки

const App = () => (
  <Router>
    <Switch>
      <Route path="/" exact component={Index} />
      <Route path="/form" component={Form} />
      <Route path="/sent" component={Sent} />
    </Switch>
  </Router>
)

export default App;