用 Mocha 和 Chai 测试 React

Question

我有一个简单的 javascript 计算器应用程序，我想学习使用 Mocha 和 Chai 进行测试驱动开发。

calculator_app.js

class calculator_app extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        formdata: ''
      };

      this._onAdd  = this._onAdd.bind(this);
      this._onSubtract  = this._onSubtract.bind(this);
      this._onMultiply  = this._onMultiply.bind(this);
      this._onDivide = this._onDivide.bind(this);
      this._onClear = this._onClear.bind(this);
      this.sayHello = this.sayHello.bind(this);
    }

    sayHello() {
        return 'hello';
    }

    render() {

        return (
            <App>
                {infoform}
                <MyHeader/>
                <Section>
                <Box colorIndex="brand">
                    <Heading style={{color: '#ffffff'}} id='header1'>Frosties Calculator</Heading>
                </Box>
                    <Box alignSelf="center" />
                    <Box>
                        <Box>
                            <Header size="small" colorIndex="grey-2" id='header2' />
                            <Box colorIndex="light-2" pad={{ horizontal: 'medium', vertical: 'medium', between: 'medium' }}>
                                <Box colorIndex="light-1" pad="large" separator="all">
                                    <Heading strong={true} id='header3'>Calculator</Heading>    
                                    <Paragraph>
                                        Sample code to display a calculator. 
                                    </Paragraph>                                
                                </Box>
                            </Box>
                        </Box>
                    </Box>
                </Section>
                <MyFooter/>
            </App>
        );
    }
}

export default calculator_app;

calculator_app.test.js

const assert = require('chai').assert;
const calculator = require('../src/js/components/calculator_app.js');

describe('calculator', function () {
  describe('sayHello()', function () {

        it('app should return hello', function () {
          let result = calculator.sayHello();
          assert.equal(result, 'hello');
        });
    });
});

当我尝试运行calculator_app.test 来检查sayHello 函数的返回时，我收到以下错误：

0 通过 (107ms) 1 失败 1) 计算器 问好（） 应用程序应该返回你好： TypeError：calculator.sayHello 不是函数 在上下文。 (C:/Users/maherni/Desktop/Projects/JavaScript/calculator_app/test/calculator_app.test.js:8:29)

谁能告诉我我做错了什么，我已经检查了我的测试文件的路径和结构

Answer 1

看起来您尝试调用方法 sayHello 而不实例化 calculator React 组件类。试试这个：

    it('app should return hello', function () {
      let result = new calculator().sayHello();
      assert.equal(result, 'hello');
    });

如果你想测试render 方法的行为，你确实应该看看Enzyme，正如Paul Fitzgerald 建议的那样。