我可以在不提供 onSubmit 处理程序的情况下使用 React 测试库测试组件 <Button/> 是否触发 SubmitEvent 吗？

Question

我有一个看起来像这样的反应组件。我正在为组件编写测试。

const Button = ({text, type}) => {
  return (
    <div>
      <button aria-label={text} className={`Button`} type={type}>
        {text}
      </button>   
    </div> 
  )
}

我如何进行测试，以便在添加道具“type='submit'”时验证是否触发了 SubmitEvent？ onSubmit 处理程序附加到另一个名为 Form 的反应组件，它位于 Button 之外，我想在另一个 Form 测试中独立测试它。

Answer 1

您可以创建一个简单的 form 组件来包装测试用例中的 Button 组件。使用 fireEvent.click(button) 触发提交事件。验证提交是否被触发。

index.tsx:

import React from "react"

export const Button = ({ text, type }) => {
    return (
        <div>
            <button aria-label={text} className={`Button`} type={type}>
                {text}
            </button>
        </div>
    )
}

index.test.tsx:

import { screen, render, fireEvent } from '@testing-library/react'
import React from 'react'
import { Button } from './'

describe('69029886', () => {
    test('should pass', () => {
        const onSubmit = jest.fn(e => e.preventDefault());
        render(<Button type='submit' text='submit' />, { wrapper: ({ children }) => <form onSubmit={onSubmit}>{children}</form> })
        const button = screen.getByLabelText(/submit/)
        fireEvent.click(button)
        expect(onSubmit).toBeCalled();
    })
})

测试结果：

 PASS  examples/69029886/index.test.tsx (9.386 s)
  69029886
    ✓ should pass (29 ms)

-----------|---------|----------|---------|---------|-------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------|---------|----------|---------|---------|-------------------
All files  |     100 |      100 |     100 |     100 |                   
 index.tsx |     100 |      100 |     100 |     100 |                   
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        9.95 s

我可以在不提供 onSubmit 处理程序的情况下使用 React 测试库测试组件 <Button/> 是否触发 SubmitEvent 吗？

Can I test if a component <Button/> fires a SubmitEvent with React Testing Library without providing a onSubmit handler?

javascript

reactjs

react-testing-library