mercredi 11 avril 2018

Why does react-router-dom break create-react-app tests? How to fix this?

I have seen the very similar post, but my question is different because it's not tests that I wrote which are failing, it is tests included in create-react-app which I do not have access to: Using Jest to test a Link from react-router v4

I'm having problems trying to test a create-react-app application that uses react-router-dom. I'm trying to adapt code from this awesome tutorial on making a serverless react app on aws: https://serverless-stack.com/

I got my app deployed and working, then I went to test it just yells and screams. I've filed an issue with the tutorial people and have been working to try to figure out why I'm getting all these errors when trying to do the tests included in create-react-app (not even my own tests) -- which some of the solutions I've found online tell me to go change my test cases to do this or that.

But the problem is that create-react-app brings its own tests, I can't even find them anywhere, and they're breaking. (Can I find these tests without ejecting??)

The first of the screaming issues happens after installing react-router-dom and adding this one liner to App.js

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

I get this error:

Watch Usage
 › Press a to run all tests.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.
  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)

    Consider adding an error boundary to your tree to customize error handling behavior.

This error above I found by going way back in my commit history and finding the first time that the tests broke. When I run tests from the latest commit I get two different error messages depending on what my test script in package.json is. If the test script is "test": "react-scripts test --env=jsdom", 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)

    Consider adding an error boundary to your tree to customize error handling behavior.

Once solution I found 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.

Here is my issue I opened on GH with the tutorial folks to try to figure this out, there is some more information on there: https://github.com/AnomalyInnovations/serverless-stack-com/issues/219

Aucun commentaire:

Enregistrer un commentaire