React Banner组件测试编写求助：验证Button子组件渲染

问题背景 #

需要验证Banner组件传入的button子组件是否正常渲染，但第二个测试用例无法通过，相关代码如下：

Banner组件代码 #

import { string, node } from "prop-types"

import * as Styled from "./Banner.styled"

const Banner = ({ heading, button }) => (
  <Styled.Banner>
    <Styled.Heading>{heading}</Styled.Heading>
    {button && button}
  </Styled.Banner>
)

Banner.propTypes = {
  heading: string.isRequired,
  button: node,
}

Banner.defaultProps = {
  button: null,
}

export default Banner

原测试代码 #

import { render, screen } from "../../../test-utils"

import Banner from "../Banner"

const heading = "heading"
const button = "button"

describe(`Banner`, () => {
  it(`renders Banner with default properties`, () => {
    render(<Banner heading={heading} />)
    expect(screen.getByText(heading)).toBeInTheDocument()
  })
  it(`renders Banner with default properties`, () => {
    render(<Banner button={button} />)
    expect(screen.getByText(button)).toBeInTheDocument()
  })
})

错误原因 #

1. 必填属性缺失：Banner组件的heading是必填属性（string.isRequired），但第二个测试用例未传入该属性，导致组件运行报错，无法正常渲染button。
2. 测试用例描述重复：两个测试的it描述完全一致，无法区分不同测试场景。

修正后的测试代码 #

import { render, screen } from "../../../test-utils"

import Banner from "../Banner"

const heading = "Test Heading"
const buttonText = "Test Button"

describe(`Banner`, () => {
  it(`renders Banner with only required heading`, () => {
    render(<Banner heading={heading} />)
    expect(screen.getByText(heading)).toBeInTheDocument()
    // 额外验证button未渲染
    expect(screen.queryByText(buttonText)).not.toBeInTheDocument()
  })
  
  it(`renders Banner with heading and button`, () => {
    // 传入必填的heading，同时传入button内容
    render(<Banner heading={heading} button={buttonText} />)
    expect(screen.getByText(heading)).toBeInTheDocument()
    expect(screen.getByText(buttonText)).toBeInTheDocument()
  })
})

额外优化建议 #

如果需要测试传入React元素作为button的场景，可以补充如下测试用例：

it(`renders Banner with a React element as button`, () => {
  const buttonElement = <button type="button">{buttonText}</button>
  render(<Banner heading={heading} button={buttonElement} />)
  expect(screen.getByRole('button', { name: buttonText })).toBeInTheDocument()
})

内容的提问来源于stack exchange，提问作者Emilia