如果我只传递一个原始值，为什么要用一个对象调用这个函数？

Question

我正在学习 react-testing-library。

我有一个名为 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>
    )
  }
}

然后在我的测试中我用 jest.fn()

嘲笑 onSubmit

但是当我测试 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')
})

谢谢。

Answer 1

您实际上是将对象传递给 onSubmit:

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

{text} 是一个对象。

改为传递 text 而不是 {text}:

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

希望对您有所帮助。

如果我只传递一个原始值，为什么要用一个对象调用这个函数？

Why is this function being called with an object if I am passing it just a primitive value?

jestjs

react-testing-library