React Calculator: Test Suite Not Passing When it Should

I built the React Calculator for the Front End Libraries projects. It works perfectly, it clearly satisfies all user experiences, but the test suite fails to recognize several conditions. This prevents me from submitting my project and claiming my certificate.

I only used React for this project (and a font awesome CDN to change the “/” on the divide button into a division symbol). So there’s nothing weird going on that should be messing with the test suite.

Here’s a link to it with the test suite on CodePen: https://codepen.io/HexagonBen/pen/ExQzBrg

EDIT
This is a support question and not a javascript question, but a few minutes after I posted it a mod moved it from support into javascript. I don’t want to rock the boat so I won’t move it back, but I don’t have any javascript questions. I just need technical support since freeCodeCamp’s test suite isn’t working properly.

browser information:

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

Challenge: Build a JavaScript Calculator

Link to the challenge:

Try logging out conductor and run the tests. Sometimes it is null, not sure why that is, as I didn’t really look into it.

Ok I added two console logs that log whenever the “=” button is pushed. One logs: “Here’s the input”, and displays whatever sequence of characters has been entered for calculation, and “Here’s the conductor,” which logs the conductor. The conductor appears to be functioning normally. Its job is to produce an ordered array of all of the “*”, “/”, “+”, and "-"s that have been entered into the string and require resolution before an answer can be returned for the display. If the user inputs a number but doesn’t enter any operations, the conductor will be null because it will be unable to find any operators to resolve.

It does occur to me that maybe the test suite is running into trouble because it’s filling up the input all the way up to the digit limit and it isn’t hitting the clear button between operations, so maybe it’s getting stopped by the digit limit. I’ll try cutting off a few digits from the answer so it doesn’t get so close to the digit limit just in case that’s the problem…

Conductor expression is working as it should, and I tried rounding the answers down to 6 decimal places so the test suite wouldn’t bump into the digit limit, and that didn’t change anything. The calculator still fails all of the same checks.

The problem isn’t with my calculator. Something about the structure of my project breaks the testing suite. My calculator works perfectly. I’ve thoroughly tested that it meets all of the criteria. Can somebody on the freeCodeCamp staff manually set my account to pass the calculator project? It’s really quick and easy to pull up my calculator and see that it meets all requirements. I’ve been modifying the code all day trying to get the testing suite to work but the testing suite hates my project no matter how I modify it.

You are using React 18, which is not totally compatible with the test suite
You can follow this issue for this bug:

it’s putting out warnings for using a ‘null’ value. (see red exclemation mark). i got it to pass one more test by setting it conditionally to [].
the other stuff might be about react 17/18, but that’s not really an FCC test suite issue, just something we gotta work around (which sucks)

But my code is using ReactDOM.render, which to my understanding causes it to run as React 17 and not React 18, as lasjorg pointed out in the thread you linked:

" If your project is not passing the tests using React 17 (or 18 using ReactDOM.render ) then it is most likely an issue with your code and not the tests."

I spent several days working on this project, and my code has no problems. My family has no income right now and we’re going to lose our home in less than a year if I don’t secure an income stream.

Can freeCodeCamp just manually pass my project since the suite isn’t working for it?
Otherwise how do I work around this test suite problem if I’m already using ReactDOM.render and therefore already using React 17?

What should I do?

EDIT

If freeCodeCamp can’t manually pass my project, can I just copy-paste somebody else’s project that has the tests passing, and include a link inside the project to my actual calculator project, which works perfectly and should be passing the tests anyway?

Thanks for trying ugwen. I’m already using ReactDOM.render, so it should be using React 17, not React 18.

I don’t suppose you have any ideas for how I can try to work around this test suite to get my code to pass?

I suggest you focus on building your portfolio and create your own projects instead of loosing time with a project that doesn’t pass tests when it should.

The freeCodeCamp certification doesn’t really have much meaning other than you completed a free course, it can give you the basics, yes, but those are not important™ certifications that would add value to your resume.

1 Like

Hi

Your code is currently using these cdn links for React:

"https://unpkg.com/react@18/umd/react.development.js"
"https://unpkg.com/react-dom@18/umd/react-dom.development.js"

I tried replacing them with the links I’m using for these projects:

"https://unpkg.com/react@17/umd/react.production.min.js"
"https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"

Using that version 17 production build, your code passed all but one of the tests.
I’m not any kind of an expert on this, but I don’t think you should be using the development build.

The one failing test is this calculation:

5 * - + 5

(I’ve added spaces to make that more readable).

That calculation should give a result of 10.
Your calculator gives a result of 5.

So, I think that’s a small problem you’ll need to look at once your cdn links are sorted out.

1 Like

Well, it doesn’t exactly switch the version, it just doesn’t use some of the new features of React 18 which is what (as far as I have been able to tell) has been causing the issues. But as noted by @KittyMac for whatever reason your project doesn’t pass when using React 18 even with the ReactDOM.render method.

I didn’t test it, but it is possible that some of the failing tests can be fixed by using flushSync in your code (with React 18).


I guess we need to add a note to the challenges about using React 18.

1 Like

KittyMac you’re my hero thank you!
I thought using ReactDOM.render was enough to revert to version 17.

Looks like the test suite needs full version 17, no shortcuts!

That logical error causing the 5 * - + 5 failure will be trivially easy to fix.

Thanks KittyMac!

1 Like

It should be said that the example project does work with React 18 and ReactDOM.render so it isn’t impossible to pass using it. It is however using classes and not functions with hooks so that is also another possible difference.

1 Like

You’re very welcome!

I should mention, though, that the only reason I knew to use React 17 is because I saw a thread a while ago where @ILM mentioned the problems with React 18.

So, always listen to @ILM’s advice!

Good luck with your remaining FCC courses - and, of course, the job hunting.

Don’t sell your certification short.

People like me will make it mean something when we enter the job market with better coding skills than most CS grads, the fact that it is free notwithstanding.

I am not selling it short, I am saying what it is. The certification in itself is not meaningful. It’s the experience and the skills you learn along the way, those are what matter.

Moving forward, with a more strict verification process, and stuff like that, it will change.
Plus…

My experience was nearly identical to the original poster.

I checked, double checked, triple checked and reread other articles and forum discussions that touched on this. And became fully convinced my calculator was working properly to pass the fCC test suite. Even though a common answer to the person posting the question was something along the lines of “The test suite works fine. It must be your code.” All while I was using React 18. Then finally I found this thread. I changed my Codepen to use React 17 following @KittyMac’s suggestion… boom, it all passed.

Yes, please.

We have been trying to fix the tests but they are still not working for everyone when using React 18 and hooks, at least not for all the projects (25+5 and the calc project in particular).

The thing is, it isn’t clear to me where we would add the note. But it has been brought up before.

Totally understand, not a problem. Especially since the people working on freeCodeCamp’s material are doing some great work, and also because I don’t have a clue about such things as yet.

For the Calculator project I’d like to suggest maybe putting it right after this note on the Front End Development Libraries Projects/Build a JavaScript Calculator page:

Note On Calculator Logic: It should be noted that there are two main …
… ( some other stuff ) …
Expression Logic: 32.5

Put a basic comment below this to the effect that:

Note: Some fCC campers have reported various issues with the test suite not working properly while using React 18 with hooks ( only inside of Codepen.io ( ? ) ). If this happens to you and you’ve double checked your code, consider trying React 17 instead and see if the issue is solved.”

(Hopefully someone can write this note a lot more professionally than I just did!)

And maybe a note to the same effect after the last user story on the 25 + 5 project page.

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