Failed Test case , Random quote machine project (React js)

I am using React js and plain CSS to build the random quote machine project for the “Front-end-libraries Certification” Click for the user story here

I am unable to pass the user story #8 .

My approach to get the random quote is :

  1. Load the JSON data from simply importing it
    import data from './quotes.json';

  2. Just pick a random index and update the component state variable

getRandomQuote = () => {
    var index = Math.floor(Math.random() * 3000);

In the render method , I have the following code:

<div id="text">
  <div id="author">
      - {}

Do you have a link to your code?

Sure Kevin , here is the github link :

Your issue is with this:

User Story #4: Within #quote-box , I can see a clickable element with a corresponding id="new-quote" .

This is your relevant code:

<div id="new-quote" >
  <button style={{backgroundColor:this.state.color}} id="submit" onClick={this.getRandomQuote}>Next Quote</button>

This is the test that is failing:

it(`When the #new-quote button is clicked, my quote machine
should fetch a new quote and display it in the #text element.`, function() {
  let prevText;


  prevText = document.getElementById('text').innerText;

  return new Promise(resolve => {
    const intervalId = setInterval(() => {
      const newText = document.getElementById('text').innerText;
      if (newText !== prevText) {
    }, 500);

But the problem is that you didn’t give it a clickable element with a corresponding id="new-quote" - no, you gave is a div with that id that contains that clickable element. So, the test is trying to click your button but it cannot find it and eventually gives up.

When I change the id for the button and remove it from the div, those tests pass.