Bundle.js and test suite issues with React

I’m not sure who can help me. I have worked for long hours to make the Javascript calculator project using React. It is working as intended. There seem to be issues with passing some tests, as the bundle.js is testing on elements that have not yet been rendered and it is not passing the test because the setState is not finished doing its job at setting the initial state back to ‘zero’. What do I do now?

Could you include a link to your project please?

Michael, I will tomorrow. Thank you for your prompt response.

Had a few details to finish up before pushing to gh-pages. Here is my project.

https://nickp2791.github.io/react-simple-calculator/

Since you’re passing test 8 (" As I input numbers, I should be able to see my input in the element with the id of “display”"), I doubt it’s an issue with updating state. Can’t check though because you haven’t posted a link to the source code.

What I noticed:

  1. If I press .5, the calculator should automatically add a 0 and store the number 0.5 as input. Yours stores 5.
  2. If I enter 5 + - * 6, the result is NaN (should be 30)

Hmm., I will get going on those. I did not notice these 2 details. I only accounted for 2 consecutive operation signs, not more than that.

Hi jsdisco, I now updated the gh pages. Please have a look …fixes are taken care of. The source code is found here:
https://github.com/NickP2791/react-simple-calculator/tree/master

git pages URL has not changed.

There still seem to be some issues with the decimal point, you’ll see it if you enter:

.5 + .3
(should be 0.2 but your calculator returns 3.5).

1 Like

Is there ever an admin that replies on these threads or is it all community helping eachother ?

I would really like to fix the little details that you are bringing up on own but to do that I would need help with getting my first problem resolved.

The state is not registering properly when the bundle.js script test is applied to it. The state is not immediately available after it changes and I see the results in the test reflecting that.

The script tests for a result 127 being returned to its original state of 0, and when I console log the state after the setstate, because it is a asynchronous function, it still shows as 127…but the DOM shows 127.

That is the issue I need help with.

It’s all volunteers here, helping in their free time, so there’s no guarantee that everybody who asks a question gets help with everything and ASAP.

You have over 200 lines of code, it would take at least half an hour only to understand all of it, and it’s close to impossible to debug it just by looking at it. I suggest you provide a link to a codesandbox or similar, because otherwise you’re kind of expecting people to set up their own version of your calculator on their computers. I do that sometimes when a problem interests me enough, but right now I really don’t have the time.

I hope someone else does, but anyway, you’re likely to get more help if you make it as easy as possible to help.

I get it, and that is what I expected. But how on this platform do I challenge the robustness of the js script used to test my code? Someone authored it…and there’s an issue with it.

Another less favorable option, so I can get this done…is to start over and dumb it down…real down. I just won’t use React!

It’s highly unlikely that there’s anything wrong with the test suite. Thousands of people have solved this challenge with React, and each time, any issues were with their code. I’m not saying that it’s impossible that there’s a bug that nobody has noticed before, just that it’s unlikely.

Well, and since I felt a little bad because you’re still stuck, I set up the project locally. It would take much longer than an hour to really get to the bottom of the issue, but maybe I can point you at something, hoping it helps. Here’s the logs for the sequence 1 + 2 = AC:

(Logged directly before the return statement. Note that I’ve removed <StrictMode> from index.js because I think it always causes double renders.)

fcc

With each click on a number, the App re-renders once. With each click on an operator or AC, it re-renders
3 times. The last two lines of the log came up after clicking AC. You can see that current (the value you use for the display) is still 3 at first render. It takes another render until it’s 0. So this is where I’d start debugging.

By the way, if you’re interested, you can find the source code for the tests here:

1 Like

jsdisco…I am speechless!!!

In no way did I want you to feel bad and to feel so bad to the point of going this much out of your way. Thank you for your time, I will be looking into this NOW.

I won’t go too much into details until I get in there is work out my issues but if I was to give some insight into the multiple renders , this could be caused by the useReducer and the 2 useEffects I used to calculate and clean stuff up.

You brought up an issue with the AC and that is what sparked in my mind that the script was not working properly (at least for this situation). I noticed that the second render was the one “cleaning” things up . The output to the screen is correct but behind the scenes it does not satisfy to testing script. So, I’ll ask you personally…am I really doing it wrong (or unorthodox) or the testing script is limited?

I really appreciate your time,
Nicolas

No worries, I saw that you used a reducer, and since I’ve never even touched Redux, I was interested in what your code does.

As for your question about limitation of the test suite, you really overestimate my knowledge here. I can’t say if the tests are designed to enforce writing good React code or if it’s just forcing you to write code in a way that makes the tests pass.

Your calculator works for every human that uses it, so for my taste, it works. Refactoring it until the tests pass though could be a chance to get a deeper understanding of React. I’d say stay at it as long as you’re motivated and you learn something.

Well, I vote for the later. In my situation I have useReducer to accept to operations and do a running subtotal. Then I use useState to keep track of everything else, including the displays. I am working on a gut feel that because to immediate answer is not available after the equals is pressed, the test is throwing up a furrball. My code runs with useEffects to deal with automatic changes in the states and everytime a new render is executed. So I will have to get rid of a few renders, including my use of the reducer just to pass the test. I know what is going on…the test does not look passed 1 render to find an answer, In my case first render calculates to subtotal, second render displays a new output using the subtotal from the first. And on top of that, I have a useEffect I use in a nifty way, to continually clean up the display when there are more than 1 consecutive operations, which only ran when the display was updated…
So back to square 2, I’m getting rid of the useEffect to cut down on the rerenders and I will prove my point that the test suite ONLY works on immediate (first render) outputs.

I’m going to go re-layout many many many hours of work…just to pass the test. I’ll have to be creative on other stuff, this won’t be it.

Well, removed reducer and all useEffects and reconnected everything. Everything passes.

As suspected the first time, the test suite only looks at the results from a first render, nothing past that point.

Too bad because I was having fun with the useEffects doing minor cleanups. More lessons learned, which I am grateful for.

jsdisco, thank you for your time on this. I really appreciate the discussion. I will be republishing on github pages in the next hour.

Yeah I get that it’s a little annoying that the tests seem to force you to sacrifice maintainability and scalability, only because you need that one result in one render. I’ll check out your solution, learned something too so thx :love_you_gesture:

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