Question

我已经学习React了几个星期，而我才刚刚开始进入单元测试部分。我非常困惑，因为涉及测试的标准很少。我已经看到很多人选择“开玩笑”，所以这也是我选择的方式。由于我在代码中使用ES6类，因此我不仅可以导出方法，还可以导出组件类。
这里的代码是我的测试用例，可以很好地工作，但是我不想一开始就建立坏的做法：

import Calc from './Calc';
import React from 'react';
import {configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

const wrapper = shallow(<Calc />);

const calculator = wrapper.instance();


test('Parentheses should close and evaluate automatically',() => {
    calculator.clear();
    const start = ['2','*(', '2', '+', '2'];


    for (let i = 0; i < start.length; i++) {
        calculator.addSign(start[i]);
    }
    calculator.calculate()

    expect(calculator.state.answ).toBe(8);

});

这是Calc组件（要评估的函数）的一部分：

class Calc extends React.Component{

state = {
    answ: 0,
    sumToEval: [],
    sumToShow:'',
}

calculate = () => {
    try{
        let sum = '';
        let bClose = false;
        let bStartingIndex = -1;
        let openCount = 0;
        let closeCount = 0;
        let closeString = '';
        for (let i = 0; i < this.state.sumToEval.length; i++) {
            if (this.state.sumToEval[i].indexOf('(') > -1) {
                if(bStartingIndex === -1) {
                    bStartingIndex = i;
                }
                openCount++;
            }
        }
        if (bStartingIndex > -1) {
            bClose = true;
            for (let i = bStartingIndex; i < this.state.sumToEval.length; i++) {
                if ( this.state.sumToEval[i].indexOf(')') > -1 ) {
                    bClose = false;
                    closeCount ++;
                }
            }
        }

        for (let i = 0; i < openCount-closeCount; i++) {
            closeString += ')';
        }



        // eslint-disable-next-line
        this.state.sumToEval.map((val) => {sum += val;})
        let answ;
        // eslint-disable-next-line
        bClose ? answ = eval(sum + closeString) : answ = eval(sum);
        console.log(answ);
        this.setState((prevState) =>{
            if (!bClose) {
                return {
                    answ: answ,
                    sumToEval: [answ + ''],
                    sumToShow: answ
                }
            }else{

                let tempArr = prevState.sumToEval;
                tempArr.push(')');
                return{
                    answ: answ,
                    sumToEval: [answ + ''],
                    sumToShow: answ
                }
            }

        });

    }catch(err){
      //  console.log(err);
        throw err;
    }
}

那么这是正确的方法还是对组件进行模拟始终是必经之路？

Answer 1

由于我在代码中使用ES6类，因此我不能只导出函数，而是导出组件类。

我认为存在误解。并非所有事物都需要成为反应组件。独自发挥作用是完全可以的。实际上，功能更好，因为它们更易于重用，更易于测试并且与视图库（反应）紧密耦合。

我应该使用嘲笑，还是使用浅酶？

1 个答案: