如何测试React中与函数式组件UI交互的函数的功能正确性

首先需要将color函数从组件文件中导出，否则测试文件无法访问到这个内部函数，调整后的组件代码如下：

// FunctionalComponent.js
export function color() {
  // 你的原有逻辑，示例：
  const container = document.getElementById('container')
  if (container) {
    container.style.color = '#f00'
  }
}

export default function FunctionalComponent() {
  return(
    <div id="container">
      
    </div>
  )
}

接下来在测试文件中使用React官方推荐的React Testing Library完成测试，代码示例如下：

// FunctionalComponent.test.js
import { render, screen } from '@testing-library/react'
import FunctionalComponent, { color } from './FunctionalComponent'

test('color函数可正确修改组件容器的颜色属性', () => {
  // 渲染目标组件
  render(<FunctionalComponent />)
  // 获取到id为container的DOM元素
  const containerEl = document.getElementById('container')
  // 验证调用前的初始状态符合预期
  expect(containerEl).not.toHaveStyle({ color: '#f00' })
  // 调用待测试的color函数
  color()
  // 验证样式已被正确修改
  expect(containerEl).toHaveStyle({ color: '#f00' })
})

你可以根据自己的实际逻辑调整断言规则：

• 如果color函数修改的是背景色、边框等其他样式属性，修改toHaveStyle中的对应字段即可
• 如果color函数是通过新增CSS类名修改样式，将断言替换为expect(containerEl).toHaveClass('你新增的类名')
• 如果你不想对外暴露color函数，可以直接测试组件内触发color执行的交互逻辑，不需要单独导出函数测试。

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