JS Calculator Tests Won't Pass

So my tests won’t pass despite when I manually perform them I get the correct answers. Any help would be appreciated.

import './App.css';
import React, { useState } from 'react';

const initialDisplay = {
  previousNum: "",
  currentNum: "",
  operation: ""
}

const App = () => {
  const [calculator, setCalculator] = useState(initialDisplay);
  const { currentNum, operation, previousNum } = calculator;

  function clear() {
    setCalculator(initialDisplay);
  }

  function deleteNum() {
    setCalculator({ ...calculator, currentNum: currentNum.slice(0, currentNum.length-1) });
  }

  function appendNumber(evt){
    const character = evt.target.value;

    if (character === "." && currentNum.includes(".")) return;
    else if (character === "0" && currentNum === "0") return;
    else if (character === "." && currentNum.length === 0) {
      setCalculator({ ...calculator, currentNum: "0" + character});
    } else setCalculator({ ...calculator, currentNum: currentNum + character});
  }

  function compute(operator) {
    let result;
    const previous = parseFloat(previousNum);
    const current = parseFloat(currentNum);

    if (isNaN(previous) || isNaN(current)) return;

    switch (operation) {
      case "+":
        result = previous + current;
        break;
      case "-":
        result = previous - current;
        break;
      case "*":
        result = previous * current;
        break;
      case "/":
        result = previous / current;
        break;
      default:
        return;
    }

    if(operator === "=") {
      setCalculator({
        ...calculator,
        currentNum: result,
        previousNum: "",
        operation: ""
      });
    } else {
      setCalculator({
        ...calculator,
        currentNum: "",
        previousNum: result,
        operation: operator
      });
    }
  }

  function chooseOperation(evt) {
    const operator = evt.target.value;

    if (operator === "-" && operation !== "") {
      setCalculator({ ...calculator, currentNum: currentNum.padStart(currentNum.length + 1, operator) });
    } else if (operation !== "" && (currentNum === "" || currentNum === "-")) {
      setCalculator({ ...calculator, currentNum: "", operation: operator });
      return;
    } else if (currentNum === "") return;
    
    if (previousNum !== "") {
      compute(operator);
    } else {
      setCalculator({
        ...calculator,
        previousNum: currentNum,
        currentNum: "",
        operation: operator
      });
    }
  }

  return(
    <div className="App">
      <h1 id="title">JavaScript Calculator</h1>
      
      <div className='previous-num'>{`${previousNum} ${operation !== "/" ? operation : "÷"}`}</div>
      <div id="display">{currentNum === "" ? "0" : currentNum}</div>
      
      <div id="calculator"> 
        {/* row top */}
        <button id="delete" onClick={deleteNum}>DEL</button>
        <button id="clear" onClick={clear}>AC</button>
        {/* row 1 */} 
        <button id="add" value="+" onClick={chooseOperation}>+</button>
        <button id="subtract" value="-" onClick={chooseOperation}>-</button>
        <button id="multiply" value="*" onClick={chooseOperation}>*</button>
        <button id="divide" value="/" onClick={chooseOperation}>÷</button>
        {/* row 2 */}
        <button id="nine" value="9" onClick={appendNumber}>9</button>
        <button id="eight" value="8" onClick={appendNumber}>8</button>
        <button id="seven" value="7" onClick={appendNumber}>7</button>
        <button id="equals" value="=" onClick={chooseOperation}>=</button>
        {/* row 3 */}
        <button id="six" value="6" onClick={appendNumber}>6</button>
        <button id="five" value="5" onClick={appendNumber}>5</button>
        <button id="four" value="4" onClick={appendNumber}>4</button>
        <button id="decimal" value="." onClick={appendNumber} >.</button>
        {/* row 4 */}
        <button id="three" value="3" onClick={appendNumber}>3</button>
        <button id="two" value="2" onClick={appendNumber}>2</button>
        <button id="one" value="1" onClick={appendNumber}>1</button>
        <button id="zero" value="0" onClick={appendNumber}>0</button>
      </div>
    </div>
  )
}

export default App;

It passes for me if I switch to the old render method.

import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));

You can also downgrade to React 17.


We have tried to fix the tests to work with React 18 but they still fail for some people.

That did it. Now I’m fully passing. Thank you.

Now my code won’t pass. I’m using React 17 as well, but I’m using the useReducer hook instead.

Below is a barebones version of my code. It won’t pass test #7 (the clear function) even though it works in my live demo.

function init() {
  return {display:0, runningTotal:0, operation:null, float:false};
}

function reducer(state1, action) {
  let state = {...state1};

  switch (action.type) {

  case 'numClick':
    if (state.display===0 || state.display==='0') state.display='';
    state.display = state.display.toString() + action.num;
    break;

  case 'float':
    if (!state.float) {
      state.display = state.display + '.';
      state.float=true;
    }
    break;

  case 'compute':
    break;

  case 'clear':
    state =  init();
    break;
  }

  return {...state}
}


function Calculator () {
  const [state, dispatch] = React.useReducer(reducer, init());

  const Digit = (props) => <button id={props.id} onClick={()=> dispatch({type:'numClick', num:props.num})}>{props.num}</button>;

  const Op = ({id,op,symbol}) => <button id={id} className='op' onClick={()=> dispatch({type:'compute', op:op})}>{symbol || op}</button>

  const ACKey = () => <button id='clear' className='op' onClick={() => dispatch({type:'clear'})}>AC</button>

  const DecimalKey = () => <button id='decimal' className='op' onClick={() => dispatch({type:'float'})}>.</button>

  return (
    <div id="calculator">

      <div id='keypad'>
        <ACKey />
        <span id="display">{state.display}</span>

	<Digit id='seven' num={7}  />
	<Digit id='eight' num={8} />
	<Digit id='nine' num={9} />
	<Op id='add' op='+' />

	<Digit id='four' num={4} />
	<Digit id='five' num={5} />
	<Digit id='six' num={6} />
	<Op id='subtract' op='-' symbol='&ndash;' />

	<Digit id='one' num={1} />
	<Digit id='two' num={2} />
	<Digit id='three' num={3} />
	<Op id='multiply' op='*' symbol='x' />

	<DecimalKey />
	<Digit id='zero' num={0} />
	<Op id='divide' op='/' symbol='&#247;' />
	<Op id='equals' op='=' />
      </div>
    </div>
  )
}
ReactDOM.render(<Calculator />, main);