Build a JavaScript Calculator - tests won't pass

Tell us what’s happening:
As far as I can tell, my calculator is passing the tests when I enter the calculations manually, but when I run the tests I only get 12/16.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Challenge: Front End Development Libraries Projects - Build a JavaScript Calculator

Link to the challenge:

Really need help here. I tried to debug and it seems like after certain tests the display from the last calculation isn’t clearing properly with the clear button. When I do it manually, I have no issues.

Hi @aharrington993!

You can click on the “x/x Passed” button to get more details about what test cases were run so it would be easier for you to debug.

Best of luck :wink:

Thanks, I did look at the details but I can’t reproduce all of the errors manually.
For example: The sequence “5 + 5 = + 3 =” should produce an output of “13” : expected ‘9.55’ to equal ‘13’
When I put this in manually I get 13.

Switching to the old render method makes all but one test fail for me.

ReactDOM.render(<Calculator />, document.getElementById("root"));

The sequence “5 * - + 5” = should produce an output of “10” : expected ‘25’ to equal ‘10’


3 Likes

Thank you! Never would have expected that.

No, if anything it is the opposite, it is slower.

What if I don’t want to batch?

Usually, batching is safe, but some code may depend on reading something from the DOM immediately after a state change. For those use cases, you can use ReactDOM.flushSync() to opt out of batching:

Thanks! This worked for me.

Same. Spent a couple hours on this. Seems like the test cases could be updated because mine was failing because I believe it was reading in the final number entered into the calculator as the answer as opposed to the real answer that was calculated, as the function that actually calculates the answer takes place after it is pressed. Not sure, either way thank you so much!

I was using this method and it was failing:

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Presentational />);

I tried everything for days and it’s something to do with how React 18 does it’s batching. you can read about it here: Automatic batching for fewer renders in React 18 · Discussion #21 · reactwg/react-18 · GitHub
instead of dealing with updating my calculator app with flush sync to fix the issue. i just switched ReactDOM.createRoot(document.getElementById('root'); root.render(<App/>) to
ReactDOM.render(<App/>, document.getElementById(‘root’)) and if your running react locally change import ReactDOM from 'react-dom/client' removing /client. you can read about react-dom here: https://reactjs.org/docs/react-dom.html and the client here: https://reactjs.org/docs/react-dom-client.html
after reverting back to version 17 all test passed. I hope this helped someone.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.