如何用Jest和React Testing Library测试返回嵌套JSX的内部函数

首先给出你的组件代码：

export default function App() {
  let arr = [{name:"a"},{name:"b"},{name:"c"},{name:"d"},{name:"e"},{name:"f"}]

  let renderFn = () => {
    return arr.map(a => {
      return <div>{a.name}</div>
    })
  }
  return (
    <div className="App">
      <div>{renderFn()}</div>
    </div>
  );
}

针对这类组件内部渲染函数的测试，有两种实用思路：

1. 测试组件最终渲染结果（推荐） #

内部函数属于组件的实现细节，测试最终呈现的UI才是更可靠的方式——不管内部怎么实现，只要输出符合预期就通过。用@testing-library/react的示例代码如下：

import { render, screen } from '@testing-library/react';
import App from './App';

test('正确渲染所有数组元素对应的div', () => {
  render(<App />);
  
  // 逐个检查每个name对应的元素是否存在
  ['a', 'b', 'c', 'd', 'e', 'f'].forEach(name => {
    expect(screen.getByText(name)).toBeInTheDocument();
  });
});

2. 提取函数单独测试（适用于复杂逻辑） #

如果renderFn包含复杂逻辑，需要单独验证，可以把它从组件中抽离成可导出的独立函数：

修改后的组件代码 #

// 抽离成独立函数并导出
export function renderItems(arr) {
  return arr.map(a => <div>{a.name}</div>);
}

export default function App() {
  let arr = [{name:"a"},{name:"b"},{name:"c"},{name:"d"},{name:"e"},{name:"f"}]

  return (
    <div className="App">
      <div>{renderItems(arr)}</div>
    </div>
  );
}

单独测试抽离的函数 #

import { renderItems } from './App';
import { render, screen } from '@testing-library/react';

test('renderItems能根据输入数组生成正确JSX', () => {
  const testData = [{name:"x"}, {name:"y"}];
  // 渲染函数返回的JSX片段
  render(<>{renderItems(testData)}</>);
  
  expect(screen.getByText('x')).toBeInTheDocument();
  expect(screen.getByText('y')).toBeInTheDocument();
});

总结：优先选择第一种思路，符合React测试的最佳实践；第二种适合逻辑复杂、需要单独验证函数逻辑的场景。

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