Some part of the tutorial breaks the tests included in create-react-app

[iggirex]

The tests included in create-react-app do not work if you follow this tutorial to the end.
create-react-app tests work fine for me when I first generate a project, but for the code I built using this tutorial the very basic tests (just test to see if a component loaded up on a page) break.

I mentioned this in the comment section of "Wrapping Up" and got confirmation from @jayair that his tests were broken as well. (though he had a different error message).

My original post explaining the problem:

I didn't run any tests during this tutorial, and by the end of it, the standard create-react-app tests are broken for me. Running "npm test" yields:

> [email protected] test /Users/Bazo/serverlessReact/notes-app-client
 > react-scripts test --env=jsdom

2018-04-04 15:24 node[65744] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2018-04-04 15:24 node[65744] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2018-04-04 15:24 node[65744] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: Error watching file for changes: EMFILE
    at exports._errnoException (util.js:1036:11)
    at FSEvent.FSWatcher._handle.onchange (fs.js:1406:11)
npm ERR! Test failed.  See above for more details.

On the Jest and Facebook GH issues they suggest changing the npm command from
"test": "react-scripts test --env=jsdom",
to
"test": "jest",
which then yields a different error:

npm test                                                                                                         ⏎

> [email protected] test /Users/Bazo/Desktop/projekkz/serverlessReact/notes-app-client
> jest

 FAIL  src/App.test.js
  ● Test suite failed to run

    /Users/Bazo/Desktop/projekkz/serverlessReact/notes-app-client/src/App.test.js: Unexpected token (7:18)
         5 | it('renders without crashing', () => {
         6 |   const div = document.createElement('div');
      >  7 |   ReactDOM.render(<App />, div);
           |                   ^
         8 |   ReactDOM.unmountComponentAtNode(div);
         9 | });
        10 |

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.357s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

It seems to be a problem with babel maybe? It has a problem with the JSX caret symbol. When I run a brand new create-react-app and run 'npm test', tests work fine. I'm using latest npm. I've tried deleting node_modules, package.json.lock and reinstalling them, but the problem is still there. Anyone else having this issue? (Great tutorial by the way, I think adding one test at the end to show that tests work would make it stronger).

[jayair]

@iggirex Here is the error I see when I run npm run test.

 FAIL  src/App.test.js
  ● renders without crashing

    Invariant Violation: You should not use <Route> or withRouter() outside a <Router>

But this is normal because you'd need to configure your tests to run with React Router. I'm not sure what the error is that you are seeing. Can I see your package.json?

[iggirex]

Sure @jayair, I don't think I've added anything outside of what the tutorial said to do. I did change the "test" script to "jest", as I described in the OP.

  "name": "notes-app-client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "aws-amplify": "^0.2.11",
    "react": "^16.2.0",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.2.0",
    "react-router-bootstrap": "^0.24.4",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  }
}

[jayair]

@iggirex Yeah the only thing that is different for me is the test command. Can I see the GH issue that suggested changing the command?

[iggirex]

@jayair there were several places that suggested to change that script, here is one of them on the facebook/jest GH: jestjs/jest#3436

It's a little ways down, I haven't tried installing "watchman" since 1) it's deprecated and 2)I don't know what it does or why add it to create-react-app, but I'm running out of other solutions so i might try that soon here.

[iggirex]

I went back through my commit history and found the place where the tests start to break. I should mention though, that the error messages when trying to run tests are very different in these earlier commits than when the project is finished (notice the newer errors up in the OP, and these diff error messages back in the commit history)
The problem is in App.js, when either these lines are added:

<Link to="/">Scratch</Link>
<Routes />

This is what the file looks like when it's breaking:

class App extends Component {
  render() {
    return (
      <div className="App container">
        <Navbar fluid collapseOnSelect>  
          <Navbar.Header>
            <Navbar.Brand>
              <Link to="/">Scratch</Link>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
        </Navbar>
        <Routes /> 
    );
  }
}

And this is the error I get when these lines are added to the project:

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        0.448s, estimated 1s
Ran all test suites.

  console.error node_modules/fbjs/lib/warning.js:33
    Warning: Failed context type: The context `router` is marked as required in `Link`, but its value is `undefined`.
        in Link (at App.js:14)
        in NavbarBrand (at App.js:13)
        in div (created by NavbarHeader)
        in NavbarHeader (at App.js:12)
        in div (created by Grid)
        in Grid (created by Navbar)
        in nav (created by Navbar)
        in Navbar (created by Uncontrolled(Navbar))
        in Uncontrolled(Navbar) (at App.js:11)
        in div (at App.js:10)
        in App (at App.test.js:7)

  console.error node_modules/react-dom/cjs/react-dom.development.js:9747
    The above error occurred in the <Link> component:
        in Link (at App.js:14)
        in NavbarBrand (at App.js:13)
        in div (created by NavbarHeader)
        in NavbarHeader (at App.js:12)
        in div (created by Grid)
        in Grid (created by Navbar)
        in nav (created by Navbar)
        in Navbar (created by Uncontrolled(Navbar))
        in Uncontrolled(Navbar) (at App.js:11)
        in div (at App.js:10)
        in App (at App.test.js:7)

    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

When I comment out both lines, the tests work.

[iggirex]

Started the tutorial from scratch, I can confirm this is the step where the tests stop working (the errors are identical to the the ones in the post directly above this one): https://serverless-stack.com/chapters/create-containers.html

"And go ahead and remove the code inside src/App.js and replace it with the following."

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Navbar } from "react-bootstrap";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div className="App container">
        <Navbar fluid collapseOnSelect>
          <Navbar.Header>
            <Navbar.Brand>
              <Link to="/">Scratch</Link>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
        </Navbar>
      </div>
    );
  }
}

export default App;

I realize there is some bad things that happen to React tests when you start using React Router, I'm still pretty new to it and don't know much about this or how to fix it. I'll make another post once I find a fix. I think it would be good to at least have a warning, if not a workaround, to inform people doing the tutorial.

[jayair]

@iggirex Yeah this is the error you will probably see. This is because if you are tests components that rely on the Router, you'll need to provide them with a context - https://stackoverflow.com/a/43775325

[iggirex]

@jayair you were right about having to add context. I was having some different issues as well trying to figure out what my test script should be (in package.json) and getting a CRA dependency called watchman to work. I've detailed my solution in this SO post:
https://stackoverflow.com/questions/49784990/why-does-react-router-break-create-react-app-tests-how-to-fix-this
Let me know if you also want me to put the answer on this GH and I can do that. I'll go ahead and close the issue for now though.

[jayair]

@iggirex Thanks for following up. I'll direct people to this issue in case people run in to something similar.