learn-co-curriculum / react-async-fetch-lab

React Fetch Lab

Objectives

• Practice creating a React component that utilizes fetch to display content

Deliverables

This lab is missing the App component that index.js is looking for. To pass the tests in this lab:

• Create an App class component from scratch
• Write a componentDidMount method. Inside the method, send a fetch request to http://api.open-notify.org/astros.json, a free API that returns a list of people currently in space.

Note: This lab uses some packages that need a relatively new version of node. If you've got nvm, run nvm install node to update.

react-async-fetch-lab's Issues

npm test persists the fetchMocks from one run to the next, giving an error on later runs.

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")
  })
  // ...
})

Tests do not support async/await syntax

Tests Don't Test for State or Rendered Output

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;

Functional vs. Container components

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.