question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support for React Router

See original GitHub issue

Current behavior:

I’m prototyping using Cypress to test our app. But I ran into difficulty right away with the the location URL not being updated in the test runner. Our app uses React Router V4 to handle navigations in our single-page-app. This means we aren’t actually doing requests to the server for each URL change. Rather, we are updating the URL to give the appearance that the user is on a new page, but behind the scenes we are only making requests for data to the server and not an actual request for the page in the browser’s URL.

So when I run the a test like this:

    const nextButtonSelector = 'button[type=submit]';

    cy.visit('https://accounts.outreach.io/users/sign_in')
    cy.get('#user_email').type('username');
    cy.get(nextButtonSelector).click();
    cy.get('input[type=password]').type('passord!');
    cy.get(nextButtonSelector).click();
    cy.location('pathname').should('include', '360');

It logs-in just fine, but it fails to find the “360” page in the URL. This is not actually a URL that we issue an HTTP request for. Rather, it’s a react-router “route” that should show in the browser’s URL and then we completely client-side render the page in React.

Desired behavior:

The URL in the Cypress test runner should update just like the URL of the normal browser window when it is not being controlled by Cypress.

Steps to reproduce:

I’d like to know if anyone else has had Cypress running via React-Router. If not, I’m happy to help set-up a small app using React Router so that there’s an easy repro environment. I just would like to know first if this is a new feature or just a bug fix first before going through that effort.

Versions

Cypress 3.0.1 Chrome 67.0.3396.99 Mac OS X 10.13.4 (17E202)

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:11 (6 by maintainers)

github_iconTop GitHub Comments

2reactions
JohnStrickcommented, Jun 28, 2018

I don’t see any error thrown. I just don’t see the URL being updated. When the code executes cy.location('pathname').should('include', '360'); it returns false because the URL is not updated. I’ll see if I can get something setup in a few days to have a more localized repro.

0reactions
brian-manncommented, Jun 29, 2018

Released in 3.0.2.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Router: Home v6.6.1
Start with the tutorial. It will quickly introduce you to the primary features of React Router: from configuring routes, to loading and mutating...
Read more >
Ultimate React Router v6 Guide
React Router is by far the most popular routing library in React and this article goes in depth on everything you need to...
Read more >
React Router - W3Schools
Create React App doesn't include page routing. React Router is the most popular solution. Add React Router. To add React Router in your...
Read more >
remix-run/react-router: Declarative routing for React - GitHub
React Router is a lightweight, fully-featured routing library for the React JavaScript library. React Router runs everywhere that React runs; on the web, ......
Read more >
react-router-dom - npm
The react-router-dom package contains bindings for using React Router in web applications. Please see the Getting Started guide for more ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found