learn-co-curriculum / react-async-fetch-lab Goto Github PK

Running the test with the watch command - as is used by npm test - persists the fetchMocks from one run to the next, giving an error on later runs.

Error: Adding route with same name as existing route.

  <App />
    1) "before all" hook

  0 passing (1ms)
  1 failing

  1) <App />
       "before all" hook:
     Error: Adding route with same name as existing route. See `overwriteRoutes` option.
      at Object.FetchMock.addRoute (node_modules/fetch-mock/src/lib/set-up-and-tear-down.js:55:9)
      at Object.FetchMock.mock (node_modules/fetch-mock/src/lib/set-up-and-tear-down.js:22:7)
      at Object.FetchMock.(anonymous function) [as get] (node_modules/fetch-mock/src/lib/set-up-and-tear-down.js:98:15)
      at Context.<anonymous> (test/index.test.js:21:15)

test/index.test.js:21 points to fetchMock.get('*', {people: [{name:"Stimpy"}]})

describe('<App />', () => {
  let appWrapper
  let fetchSpy

  before(() => {
    global.fetch = require('node-fetch')
    fetchMock.get('*', {people: [{name:"Stimpy"}]})
    fetchSpy = spy(global, "fetch")
  })
  // ...
})

The README asks 'App.js' to be written as a functional component, and the next line asks it to include a 'componentDidMount()' method call with a fetch inside. In the solution branch, 'App.js' is a container component, and the call to fetch returns its data to App's state. A student came to me very confused about this today, unsure about where to write 'componentDidMount' inside of a functional component. Some research revealed that one way to do this would be through 'https://www.npmjs.com/package/react-pure-lifecycle,' but the README preceding this lab makes no mention of it.

Additionally, the "Button", "Example", and "Greeting" components aren't used anywhere else in the App.

As far as I can tell, the tests only test for the App component and componentDidMount using fetch. But they aren't testing for anything else, like the code returned from render() or the App constructor() or the declared state inside the constructor.

My code just passed the tests with this code:

import React, {Component} from 'react';

const URL = "http://api.open-notify.org/astros.json"

class App extends Component {

  componentDidMount() {
    fetch(URL).then(res => res.json())
  }

  render() {
    return "hello"
  }
}

export default App;