Jest测试调用sum函数报TypeError: sum is not a function错误如何解决？

• 函数作用域与导出问题：你定义的sum是App组件内部的局部函数，仅在App组件作用域内可访问，没有作为模块成员导出。当前App.js仅导出了默认成员App，不存在命名导出的sum，因此测试文件中import { sum } from './App'拿到的sum是undefined，调用时就会报「不是函数」的错误。
• 测试用例传参错误：即使能正确拿到sum函数，当前测试用例的写法sum(2 + 1)等价于仅给sum传入一个参数3，和你定义的sum需要两个入参的逻辑不符，也无法得到预期结果，正确写法应为sum(1, 2)。

如果需要单独测试sum函数，可将sum从App组件内部提取到模块顶层，并新增命名导出，修改后的App.js代码如下：

import logo from './logo.svg'
import './App.css'

// 移到组件外部，添加命名导出
export const sum = (a, b) => {
    return a + b
}

const App = () => {
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <p>Hello</p>
                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn React
                </a>
            </header>
        </div>
    )
}

export default App

同时修改App.test.js中的sum测试用例：

it('Sum equals 3', () => {
    expect(sum(1, 2)).toBe(3)
})

如果sum仅在App内部使用，不需要单独对外暴露，也可以不单独抽离测试，仅测试组件本身的渲染、交互逻辑即可。

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