Я изучаю 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;
}
}
Так это правильный подход, или всегда надо издеваться над компонентами?