Почему эта функция вызывается с объектом, если я передаю ему просто примитивное значение? - PullRequest
Новая
       18

Почему эта функция вызывается с объектом, если я передаю ему просто примитивное значение?

0 голосов
/ 05 марта 2020

Я изучаю библиотеку реагирования-тестирования.

У меня есть этот компонент, называемый MovieForm, он имеет обработчик onSubmit, который сопоставлен с функцией, поступающей из реквизита, который называется формой отправки. onSubmit вызывается со свойством состояния text

Вот как выглядит компонент: 

export default class MovieForm extends Component {

  state = {
    text: 'x',
  }

  render() {

    const {submitForm} = this.props
    const {text} = this.state
    debugger
    return (
      <div>
        <form onSubmit={() => submitForm({text})} data-testid="movie-form">
          <input onChange={(e) => this.onChange(e)} type="text" name="" id=""/>
          <h1>text: {text}</h1>
          <button>Submit</button>
        </form>
      </div>
    )
  }
}

Затем в моем тесте я высмеиваю, что onSubmit с jest.fn()

Но когда я проверяю, был ли submitForm вызван с 'x, так как это было начальное состояние state.text, он выдает ошибку и говорит, что на самом деле он был вызван с {"text": "x"}

ОШИБКА: 

  Expected mock function to have been called with:
      ["x"]
    But it was called with:
      [{"text": "x"}]

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

   <form onSubmit={() => submitForm({text})} data-testid="movie-form">

Можете ли вы объяснить, почему это так?

Это тест: 

const onSubmit = jest.fn()

test('<MovieForm />', () => {
  const {debug, getByTestId, queryByTestId, container, getByText} = render(<MovieForm submitForm= {onSubmit} />)
  fireEvent.click(getByText('Submit'))
  expect(onSubmit).toHaveBeenCalledWith('x')
})

Спасибо.

1 Ответ

1 голос
/ 05 марта 2020

Вы фактически передаете объект в onSubmit: 

<form onSubmit={() => submitForm({text})} data-testid="movie-form">

{text} - это объект.

Вместо этого измените значение на text вместо {text}: 

<form onSubmit={() => submitForm(text)} data-testid="movie-form">

Надеюсь, это поможет.

...