测试与摩卡和柴的反应

时间:2018-01-08 14:03:21

标签: javascript reactjs mocha tdd chai

我有一个简单的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)计算器         问好()           app应该返回你好:       TypeError:calculator.sayHello不是函数        在上下文。 (C:/Users/maherni/Desktop/Projects/JavaScript/calculator_app/test/calculator_app.test.js:8:29)

有人可以告诉我我做错了什么,我已经检查了我的测试文件的路径和结构

1 个答案:

答案 0 :(得分:0)

看起来您尝试在不实例化sayHello React Component类的情况下调用方法calculator。试试这个:

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

如果您想测试render方法的行为,您确实应该看一下EnzymePaul Fitzgerald建议。