npmpackage.info

Gathering detailed insights and metrics for cypress-react-router

Other packages similar to cypress-react-router

react-router

7.0.1

Declarative routing for React

react-router-dom

7.0.1

Declarative routing for React web applications

@cypress/react

8.0.2

Test React components using Cypress

cypress

13.16.0

Cypress is a next generation front end testing tool built for the modern web

Gathering detailed insights and metrics for cypress-react-router

cypress-react-router

When using React Router Dom `cy.visit()` reloads the application from the server, use `cy.historyPush()` to navigate without reloading.

2.0.1

MIT

TypeScript

369.00 B

645,224 4.2

Installations

npm install cypress-react-router

Pull Requests

Open

1

Total

546

Closed

112

Merged

433

Issues

Open

1

Total

3

Closed

2

Releases

v2.0.1

Published on 09 Dec 2021

v2.0.0

Published on 17 Nov 2021

v1.0.2

Published on 14 Feb 2021

v1.0.1

Published on 08 Feb 2021

View all 4 releases

Developer

mauricedb

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

>=10

Typescript Support

No

Node Version

14.18.0

NPM Version

7.24.0 Statistics

3 Stars

899 Commits

3 Watching

3 Branches

1 Contributors

Updated on 25 Nov 2024

Bundle Size

683.00 B

Minified

369.00 B

Minified + Gzipped

Bundlephobia

Languages

TypeScript (77.61%)

HTML (14.13%)

JavaScript (8.26%)

Total Downloads

Cumulative downloads

Total Downloads

645,224

Last day

-19.2%

1,210

Compared to previous day

Last week

-6%

6,654

Compared to previous week

Last month

40.9%

31,352

Compared to previous month

Last year

10%

250,320

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

cypress react react-router-dom

Dev Dependencies

@size-limit/preset-small-lib @types/react @types/react-dom cypress husky react react-dom react-router-dom size-limit tsdx tslib typescript

Versions

Cypress History Support

Installation:

npm install cypress-react-router

Usage:

Adds cy.routerNavigate() command to the Cypress object to navigate using the React Router Dom useNavigate() API. The command take the to and an optional options object as parameter.

With TypeScript

Typings should be added as follows in tsconfig.json:

1{
2  "compilerOptions": {
3    "lib": ["es5", "dom"],
4    "target": "es5",
5    "types": ["cypress", "cypress-react-router"]
6  },
7  "include": ["**/*.ts"]
8}

Should you use this package?

If you are wondering if you should use this package the most likely answer is no.

In most cases you should do something like:

1cy.visit('/')
2cy.get('[href="/article/42"]').click();

Or use some other cy.get() selector, or even better cy.findByRole('link', { name: 'Article 42' }) from Cypress Testing Library.

So if you should not use this normally why does it exist?

In some cases you need to do setup work and the navigate to some well know route with previously setup data. So you might do something like:

1cy.visit('/');
2cy.login();
3cy.visit('/article/42');

The problem here is that the second cy.visit() reloads the application from the server. And if your application is a Single Page Application or SPA using React Router Dom you have just lost all state setup with the call to your custom cy.login() command.

So instead of calling cy.visit() a second time we want to do a history.push() like you would in the React application and what happens if you click on a <Link /> component in the browser. And that is what this package will let you do.

Example usage:

In the file containing your <BrowserRouter /> or <HashRouter /> add the <CypressHistorySupport />

1import React from 'react';
2import { BrowserRouter } from 'react-router-dom';
3import { CypressHistorySupport } from 'cypress-react-router';
4
5const App = () => {
6  return (
7    <BrowserRouter>
8      <CypressHistorySupport />
9      {/* Your other components */}
10    </BrowserRouter>
11  );
12};

In /cypress/support/commands.js add support for the router commands

1import 'cypress-react-router/add-commands';

Then in your Cypress tests use the cy.routerNavigate() command as needed.

1context('Open secure articles', () => {
2  beforeEach(() => {
3    cy.visit('/');
4    cy.login();
5  });
6
7  it('navigates to article 42 without reload', () => {
8    cy.routerNavigate('/article/42');
9
10    // Do whatever you need to do
11  });
12});

Versioning

Make sure to use the correct version of this library for you!

Version 1.* of this package is intended for use with React Router DOM version 5. Use the cy.historyPush() and cy.historyReplace() commands to execute the respective history.push() and history.replace() functions.

Version 2.* of this package is intended for use with React Router DOM version 6 which has an different API. Use the cy.routerNavigate() command to execute the navigate() function.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Maintained

Determines if the project is "actively maintained".

10

License

Determines if the project has defined a license.

4

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Security-Policy

Determines if the project has published a security policy.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

4.2

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More