Front-End Libraries Projects: Rando Quote Machine

I can’t get two tests to pass, even though the code does accomplish what those tests ask for. The test suite times out before confirming that a click of the “new-quote” button puts the proper data into the #quote and #author elements. Could someone help me figure out why this is the case?

I have been able to get this project to work before without using React, but it’s important to me that I use React this time. I really hope I’m able to find a solution that keeps React. Here is a link to a version of the project:

Please refrain from criticizing the fact that the data is local instead of being called from a quote database, as well as the lack of styling so far. I’m working on those parts right now.

The reason your tests are not passing is because you are using React. This project is not meant for that. The test is looking at the real static HTML to see if the ids match and they are not there until React renders them.

This is meant to be a beginner project and is supposed to use HTML/CSS/pure JS only
As stated in the assignment

Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React.

I don’t believe there is a way to make this work with React because the test is looking for static HTML id’s. You might be able to fool the test but that goes beyond the scope of this assignment

EDIT: Correction you can probably make this work with React if you manually insert the pre-rendered HTML into the HTML section, but that seems like needless work.

"1. You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. "

The complete text is:
“You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project.’ You should use a frontend framework (like React for example)` because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!”

So, not react its the problem in there.

I got it figured out. The tests pass now that the button works repeatedly.

It’s pretty simply. The test seems to make sure that the button works more than once, which was not the case with the code I posted here. Updating the method so that the quote+author were renewed each time the button is pressed fixed it.