Why is my React Project not passing the Tests?

Hello everyone! I just concluded the first project in the ‘Front End Libraries course’ on FreeCodeCamp - The Random Quote Machine, using React JS.
The app is working, but it’s failing almost all the tests in the test suite. How can I solve this. The project - https://codesandbox.io/s/charming-hill-fvi4f
Thank you for your help

1 Like

Hi there,
Give us some details about what tests your code did not pass?


PS: the first what I can see in your rendered HTML is that first

element is recognized (i guess) as wrapper element, which should have id=‘quote-box’ - instead has id=‘wrapper’.
Secondly #quote-box wrapper element should be horizontally centered - in your case is not.
1 Like

Hi Pedro! Thank you for responding. There are a total of 12 tests (https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine). My project failed 11 out of the 12. Here is the test suite https://codepen.io/freeCodeCamp/pen/MJjpwO

I’m a little confused as to how to implement your suggestions. It would mean scattering the components and starting afresh, right?

1 Like

It is passing all the tests for me. I used the react-fcctest package (I think it should still be fine to use).


lasjorg gave the answer, so code is passing all tests :slight_smile:

1 Like

Thank you @lasjorg and @pedrodoubleu for your answers.
Please how did you run the test?
I think I am not doing the test properly.
I normally copy all the codes from each component and paste them in the JS editor of the test suite.
And I’m using this test suite https://codepen.io/freeCodeCamp/pen/MJjpwO as instructed in the course.
Is it still okay to use react-fcctest in place of the test suite like in the course?
If yes, how do i get the link showing my project has passed all the tests?
Thank you for your help

I did my challenge in Visual Studio Code, but it is very similar to codesandbox and you can very easily test your code there (as @larsjorg did):

  1. Add dependency and look for ‘react fcctest’
  2. In your App.js file enter in the somewhere in the beginning ‘import ReactFCCtest from ‘react-fcctest’;’
  3. Include somewhere in the rendered code in App component.
  4. Then test app :slight_smile:

Regarding question about react-fcctest and its eligibility to pass this project: I have just tested it in my VCS environment, then just share the link to public project on GitHub. As far my project has not been rejected :smiley: I do not know if someone is checking these projects or some bot is doing that.

1 Like

Hi @pedrodoubleu , hi @lasjorg
I did as you said and the test was successful (please see attached image

). I also submitted the link to the project’s repo on github without any problems.
Thanks alot!

1 Like