harblaith7/React-Testing-Library-Net-Ninja

npm test failing on initial install

Opened this issue · 2 comments

This seems to be a very good video.
I installed the repo and npm test failed: Invariant failed: You should not use <Switch> outside a <Router>
Here's the steps:
➜ git clone https://github.com/harblaith7/React-Testing-Library-Net-Ninja.git
➜ React-Testing-Library-Net-Ninja git:(main) npm install
➜ React-Testing-Library-Net-Ninja git:(main) npm start
➜ React-Testing-Library-Net-Ninja git:(main) git checkout 01-Starter-Project
➜ React-Testing-Library-Net-Ninja git:(main) npm test

  ● renders learn react link
    Invariant failed: You should not use <Switch> outside a <Router>

      3 |
      4 | test('renders learn react link', () => {
    > 5 |   render(<App />);
        |   ^
      6 |   const linkElement = screen.getByText(/learn react/i);
      7 |   expect(linkElement).toBeInTheDocument();
      8 | });

I fixed this by surrounding the switch in in App.js with BrowserRouter, as described in stackoverflow

      <BrowserRouter>
        <Switch>
          <Route strict exact path="/" component={TodoPage}/>
          <Route strict exact path="/followers" component={FollowersPage}/>
        </Switch>
      </BrowserRouter>

This seems to be a very good video. I installed the repo and npm test failed: Invariant failed: You should not use <Switch> outside a <Router> Here's the steps: ➜ git clone https://github.com/harblaith7/React-Testing-Library-Net-Ninja.git ➜ React-Testing-Library-Net-Ninja git:(main) npm install ➜ React-Testing-Library-Net-Ninja git:(main) npm start ➜ React-Testing-Library-Net-Ninja git:(main) git checkout 01-Starter-Project ➜ React-Testing-Library-Net-Ninja git:(main) npm test

  ● renders learn react link
    Invariant failed: You should not use <Switch> outside a <Router>

      3 |
      4 | test('renders learn react link', () => {
    > 5 |   render(<App />);
        |   ^
      6 |   const linkElement = screen.getByText(/learn react/i);
      7 |   expect(linkElement).toBeInTheDocument();
      8 | });

you can watch the solution of this error in video #8 - Assertions.
you should wrap your component around browser router.