Why does React Router break create-react-app tests? How to fix this?

Question

I have seen the very similar post: Using Jest to test a Link from react-router v4 but I'm having different errors, and all kinds of them when trying to use CRA and React Router.

If the test script is "test": "react-scripts test --env=jsdom", I get this error preventing the tests from running:

2017-06-28 14:14 node[6612] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
Error: Error watching file for changes: EMFILE
at exports._errnoException (util.js:1018:11)
at FSEvent.FSWatcher._handle.onchange (fs.js:1420:11)

One solution I've found but I haven't been able to get it to work is to install/reinstall a library called watchman. (https://github.com/facebook/react-native/issues/10028) but trying to install watchman is throwing out errors as well.

Another solution I found (https://github.com/jest-community/vscode-jest/issues/125) was to change that test script to "test": "jest", and then I get this error:

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.646s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

After going way back in my commit history to find where the test suite initially had problems, I found a different set of errors. The first of the errors happens after installing react-router-dom and adding this one liner to App.js

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

I get this error:

  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:13)
        in NavbarBrand (at App.js:12)
        in div (created by NavbarHeader)
        in NavbarHeader (at App.js:11)
        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:10)
        in div (at App.js:9)
        in App (at App.test.js:7)

  console.error node_modules/react-dom/cjs/react-dom.development.js:9627
    The above error occurred in the <Link> component:
        in Link (at App.js:13)
        in NavbarBrand (at App.js:12)
        in div (created by NavbarHeader)
        in NavbarHeader (at App.js:11)
        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:10)
        in div (at App.js:9)
        in App (at App.test.js:7)

Everything that I'm trying seems to be yielding different errors, I don't know the correct way to set this up, and since I'm still new to React I'm not very familiar with any of these messages, and the solutions I'm finding online don't seem to be working.

Answer 1

In case someone else runs into a similar issue, here is how I fixed this.

First of all, a lot of people online are saying to go change your package.json npm test script to "test": "jest" and this is the wrong thing to do: https://github.com/facebook/jest/issues/5119#issuecomment-356120965

Keep it as "test": "react-scripts test --env=jsdom" (how it comes out of the box from CRA). This is the correct script to use, but I was getting this error still:

2017-06-28 14:14 node[6612] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
Error: Error watching file for changes: EMFILE
at exports._errnoException (util.js:1018:11)
at FSEvent.FSWatcher._handle.onchange (fs.js:1420:11)

The problem here is with a package that CRA uses called "watchman". First, I'd suggest doing any software updates for your OS, as this can cause watchman issues. Second, if watchman was installed with npm, that's no bueno. Do this

npm uninstall -g watchman
brew install --HEAD watchman
npm start

Which leads me to my next problem: brew would throw errors when trying to install watchman. Turns out my brew environment had a bunch of broken links and permission errors. Using brew doctor I was able to fix these problems and successfully reinstall watchman, and get rid of that error.

After figuring out this groundwork I just had to add <MemoryRouter> to the component I was testing to get CRA and React Router to play nice together. This post explains how to do this better than I can:Using Jest to test a Link from react-router v4

After all these steps Jest finally started working correctly.