如何使用Jest测试React函数组件内部的函数

你遇到的错误是因为testFunc是TestFunction组件内部的私有函数，作用域仅限于组件内部，测试脚本无法直接访问到它。下面是两种可行的解决思路：

1. 将内部函数抽离为独立可导出的函数 #

如果testFunc不需要依赖组件的state、props或其他内部上下文，最直接的方式是把它从组件中抽出来单独导出，这样就能在测试脚本中直接导入并测试：

修改后的组件代码 #

// 抽离并导出testFunc
export const testFunc = () => {
    console.log("test");
    return "test";
};

const TestFunction = (props) =>{
    return (<div>test</div>)
}
export default TestFunction

修改后的测试脚本 #

import renderer from 'react-test-renderer';
import TestFunction, { testFunc } from './TestFunction';
import {render, fireEvent, waitFor, screen} from '@testing-library/react'
import '@testing-library/jest-dom'

it('check the testFunc', () => {
  expect(testFunc()).toBe("test");
});

2. 通过测试组件行为间接验证内部函数 #

如果testFunc必须留在组件内部（比如依赖组件的state、props或其他内部变量），不要直接测试函数本身，而是测试函数触发后带来的外部可见行为（比如UI变化、状态更新等）——这也是React测试的最佳实践：关注组件的输出，而非内部实现细节。

举个例子，假设testFunc是某个交互的处理逻辑，我们可以通过模拟用户操作，验证最终的UI结果：

修改后的组件代码 #

import { useState } from 'react';

const TestFunction = (props) =>{
    const [displayText, setDisplayText] = useState("");
    
    const testFunc = () => {
        console.log("test");
        return "test";
    };

    // 绑定到按钮点击，触发testFunc并更新UI
    const handleButtonClick = () => {
        setDisplayText(testFunc());
    };

    return (
        <div>
            <button onClick={handleButtonClick} data-testid="trigger-btn">触发函数</button>
            <span data-testid="result-text">{displayText}</span>
        </div>
    )
}
export default TestFunction

修改后的测试脚本 #

import {render, fireEvent, screen} from '@testing-library/react'
import '@testing-library/jest-dom'
import TestFunction from './TestFunction';

it('should display "test" after button click', () => {
  render(<TestFunction/>)
  
  // 模拟点击按钮
  fireEvent.click(screen.getByTestId("trigger-btn"));
  
  // 验证UI是否更新为预期结果
  expect(screen.getByTestId("result-text")).toHaveTextContent("test");
});

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