Change:
<!-- freeCodeCamp Issue Template --<!-- Please provide as much detail as possible for us to fix your issue --<!-- Remove any heading sections you did not fill out --<!-- NOTE: If your issue is CodePen Project / Test Suite related, please open it using the below URL instead --<!-- --<!-- Insert link to challenge below -- <!-- Describe below when the issue happens and how to reproduce it --Correct solution doesn't pass. Maybe I am missing something but code does exactly what is asked in challenge description but last test doesn't pass. "When text is entered into the input element and the button is clicked, the MagicEightBall component should return a p element that contains a random element from the possibleAnswers array." - this test appears failed. <!-- Describe your workspace in which you are having issues--Browser Name, Version: Chrome, Version 64.0.3282.140 (Official Build) (64-bit) Operating System: Windows 10 Mobile, Desktop, or Tablet: Desktop <!-- If relevant, paste all of your challenge code in here --<!-- Add a screenshot of your issue --!
You have the correct solution. This should be an error with the challenge tests. I've reproduced this both in production and locally, on staging. I will start working on a fix—the PR should be opened tomorrow morning (Feb 4, EST).
I found the bug. Can I submit a PR?
customarily, you would give the original responder a day or two to propose his/her solution. I had made my intentions clear in my previous comment. Nevertheless, I've tested his solution locally and it works well.
Hey ! Thanks guys, for pitching in and reporting and fixing this. Sorry about the delay, we will review and merge soon. Happy coding!
seems fix solution doesn't pass for the challenge.
The fix has not been deployed yet, it may take us a while to get into the beta server.
Still a bug on main site. Its keeping me from passing this exercise.
I thought I was going crazy. I cannot pass this challenge even with the correct answer either.
It might be helpful for you guys so I'm reporting that the bug is still there when using safari (logged in and out). When I tried to test with Chrome it just passed. Same with this challenge: Browser User Agent String: Mozilla/5.0 (Macintosh; Intel Mac OS X ) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.1 Safari/605.1.15
You used the solution shows above? If so, can you confirm this? I just tested this on production and seems to work fine (at least in Chrome, Edge, and Firefox).
safari is not passing with the code in the OP, firefox does pass. It only fails the last test
Any guess why?
I'm not sure what's happening here, I tried taking a closer look at the last test (the one that always fails). And when logging the info used in the assert, it looks like it should pass.... ! ! The two conditions in the assert are true, and it still fails. The test is complex and difficult to pinpoint what the problem is, or why it only seems to be failing in safari. By lowering the timeout at the beginning of the test from 250ms to 50ms it will pass some of the time, but still fail sometimes as well. I don't know, that's where I'm at.

Discussion:
"assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(2).name(), 'button', 'message: <code>MagicEightBall</code>&apos;s third child should be a <code>button</code> element.');", "assert(Enzyme.mount(React.createElement(MagicEightBall)).state('randomIndex') === '' && Enzyme.mount(React.createElement(MagicEightBall)).state('userInput') === '', 'message: <code>MagicEightBall</code>&apos;s state should be initialized with a property of <code>userInput</code> and a property of <code>randomIndex</code> both set to a value of an empty string.');", "assert(Enzyme.mount(React.createElement(MagicEightBall)).find('p').length === 1 && Enzyme.mount(React.createElement(MagicEightBall)).find('p').text() === '', 'message: When <code>MagicEightBall</code> is first mounted to the DOM, it should return an empty <code>p</code> element.');", <del> "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MagicEightBall)); const simulate = () => { comp.find('input').simulate('change', { target: { value: 'test?' }}); comp.find('button').simulate('click'); }; const result = () => comp.find('p').text(); const _1 = () => { simulate(); return waitForIt(() => result()) }; const _2 = () => { simulate(); return waitForIt(() => result()) }; const _3 = () => { simulate(); return waitForIt(() => result()) }; const _4 = () => { simulate(); return waitForIt(() => result()) }; const _5 = () => { simulate(); return waitForIt(() => result()) }; const _6 = () => { simulate(); return waitForIt(() => result()) }; const _7 = () => { simulate(); return waitForIt(() => result()) }; const _8 = () => { simulate(); return waitForIt(() => result()) }; const _9 = () => { simulate(); return waitForIt(() => result()) }; const _10 = () => { simulate(); return waitForIt(() => result()) }; const _1_val = await _1(); const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); const _6_val = await _6(); const _7_val = await _7(); const _8_val = await _8(); const _9_val = await _9(); const _10_val = await _10(); const actualAnswers = [_1_val, _2_val, _3_val, _4_val, _5_val, _6_val, _7_val, _8_val, _9_val, _10_val]; const hasIndex = actualAnswers.filter((answer, i) => possibleAnswers.indexOf(answer) !== -1); const notAllEqual = new Set(actualAnswers); assert(notAllEqual.size > 1 && hasIndex.length === 10, 'message: When text is entered into the <code>input</code> element and the button is clicked, the <code>MagicEightBall</code> component should return a <code>p</code> element that contains a random element from the <code>possibleAnswers</code> array.'); " </del> <ins> "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MagicEightBall)); const simulate = () => { comp.find('input').simulate('change', { target: { value: 'test?' }}); comp.find('button').simulate('click'); }; const result = () => comp.find('p').text(); const _1 = () => { simulate(); return waitForIt(() => result()) }; const _2 = () => { simulate(); return waitForIt(() => result()) }; const _3 = () => { simulate(); return waitForIt(() => result()) }; const _4 = () => { simulate(); return waitForIt(() => result()) }; const _5 = () => { simulate(); return waitForIt(() => result()) }; const _6 = () => { simulate(); return waitForIt(() => result()) }; const _7 = () => { simulate(); return waitForIt(() => result()) }; const _8 = () => { simulate(); return waitForIt(() => result()) }; const _9 = () => { simulate(); return waitForIt(() => result()) }; const _10 = () => { simulate(); return waitForIt(() => result()) }; const _1_val = await _1(); const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); const _6_val = await _6(); const _7_val = await _7(); const _8_val = await _8(); const _9_val = await _9(); const _10_val = await _10(); const actualAnswers = [_1_val, _2_val, _3_val, _4_val, _5_val, _6_val, _7_val, _8_val, _9_val, _10_val]; const hasIndex = actualAnswers.filter((answer, i) => possibleAnswers.indexOf(answer) !== -1); const notAllEqual = new Set(actualAnswers); assert(notAllEqual.size > 1 && hasIndex.length === 10, 'message: When text is entered into the <code>input</code> element and the button is clicked, the <code>MagicEightBall</code> component should return a <code>p</code> element that contains a random element from the <code>possibleAnswers</code> array.');}" </ins> ], "solutions": [ "nconst inputStyle = {n  width: 235,n  margin: 5n}nnclass MagicEightBall extends React.Component {n  constructor(props) {n    super(props);n    this.state = {n      userInput: '',n      randomIndex: ''n    }n    this.ask = this.ask.bind(this);n    this.handleChange = this.handleChange.bind(this);n  }n  ask() {n    if (this.state.userInput) {n      this.setState({n        randomIndex: Math.floor(Math.random() * 20),n        userInput: ''n      });n    }n  }n  handleChange(event) {n    this.setState({n      userInput: event.target.valuen    });n  }n  render() {n    const possibleAnswers = [n      "It is certain", "It is decidedly so", "Without a doubt",n      "Yes, definitely", "You may rely on it", "As I see it, yes",n      "Outlook good", "Yes", "Signs point to yes", "Reply hazy try again",n      "Ask again later", "Better not tell you now", "Cannot predict now",n      "Concentrate and ask again", "Don't count on it", "My reply is no",n      "My sources say no", "Outlook not so good","Very doubtful", "Most likely"n    ];n    const answer = possibleAnswers[this.state.randomIndex];n    return (n      <div>n        <inputn          type="text"n          value={this.state.userInput}n          onChange={this.handleChange}n          style={inputStyle} /><br />n        <button onClick={this.ask}>Ask the Magic Eight Ball!</button><br />n        <h3>Answer:</h3>n        <p>n          {answer}n        </p>n      </div>n    );n  }n};"