如何验证元素中存在多段文本？React测试断言报错求助

测试失败的核心原因 #

1. 标签文本断言错误：你传递了整个option对象给getByText，但该方法仅接受文本字符串、正则或匹配函数；同时label与radio同属一个父div，并非radio的子元素，within(option)无法定位到标签。
2. Span文本断言错误："Some other text"所在的span是radio父div的兄弟元素，而非radio的子元素，因此within(option)无法找到该span。

修复后的测试代码 #

import { render, screen, within } from '@testing-library/react'

describe('MyComponent', () => {
    const props = {
        options: [
            { id: 1, label: 'Apple' },
            { id: 2, label: 'Banana' },
            { id: 3, label: 'Cherry' },
        ]
    }

    it('渲染组件并验证所有内容正确', () => {
        render(<MyComponent {...props} />)
        
        const radioButtons = screen.queryAllByRole('radio')
        expect(radioButtons).toBeArrayOfSize(3)

        radioButtons.forEach((radio, index) => {
            // 获取包含radio和label的父div容器
            const optionDiv = radio.closest('div')
            // 验证label文本匹配对应选项
            expect(within(optionDiv).getByText(props.options[index].label)).toBeInTheDocument()
            
            // 获取div的兄弟span元素并验证文本
            const siblingSpan = optionDiv.nextElementSibling
            expect(siblingSpan).toHaveTextContent("Some other text")
        })

        // 额外验证：确保生成的span数量与选项数一致
        const spanElements = screen.queryAllByText("Some other text")
        expect(spanElements).toBeArrayOfSize(3)
    })
})

可选组件优化（非必须） #

原组件返回语句中的冗余大括号可移除，让代码更简洁：

export const MyComponent = props => {
    return props.options.map(option => (
        <>
            <div>
                <input type="radio" id={option.id} name="group" value={option.id} />
                <label htmlFor={option.id}>{option.label}</label>
            </div>
            <span>Some other text</span>
        </>
    ))
}

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