React计算器组件Mocha+Chai测试报错：sayHello不是函数

这个错误的核心原因很明确：你尝试直接调用组件类的sayHello方法，但它是实例方法，只能通过组件的实例来调用，而不是类本身。

具体问题拆解 #

1. 你的calculator_app是一个React组件类，sayHello是定义在类原型上的实例方法——只有当你创建了这个类的实例后，才能访问到这个方法。
2. 另外，你用export default导出组件，在CommonJS环境（Mocha默认是这个环境）中导入时，默认导出会被放在模块的.default属性下，直接require得到的其实是包含默认导出的模块对象，不是组件类本身。

修正后的测试代码 #

修改你的calculator_app.test.js：

const assert = require('chai').assert;
// 注意加上.default获取默认导出的组件类
const CalculatorApp = require('../src/js/components/calculator_app.js').default;

describe('calculator', function () {
  describe('sayHello()', function () {
    it('app should return hello', function () {
      // 创建组件实例，传入空props（React组件构造函数需要props参数）
      const calculatorInstance = new CalculatorApp({});
      let result = calculatorInstance.sayHello();
      assert.equal(result, 'hello');
    });
  });
});

额外建议 #

• React组件类名建议首字母大写（比如改成CalculatorApp），这是React的通用惯例，能避免和普通变量混淆。
• 如果之后要测试组件的渲染、交互逻辑，推荐使用React Testing Library或Enzyme这类专门的React测试工具，它们能更方便地模拟组件挂载、用户操作等场景。

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