cypress-helper-history

A Cypress command for navigating via the History API during tests; an alternative to cy.visit for manually navigating within single page applications.

Uses window.history.pushState by default, but you can make the helper use a history instance as well.

Setup

1. Install package

npm install --save-dev cypress-helper-history

2. Import Cypress command

// E.g. in cypress/support/index.js
import 'cypress-helper-history';

3. Expose your `history` (optional)

// E.g. in src/history.js

// Create your history instance, for example like this:
import { createBrowserHistory as createHistory } from 'history';

const history = createHistory();
export default history;

// Then expose it to the helper like this:
if ('Cypress' in window) {
  window.__chh__history__ = history;
}

Usage

describe('cypress-helper-navigate', () => {
  before(() => {
    cy.visit('/');
  });

  it('can do client-side navigation', () => {
    cy.location('pathname').should('equal', '/');
    cy.navigate('/example');
    cy.location('pathname').should('equal', '/example');
  });

  it('supports log option', () => {
    cy.navigate('/not-logged', undefined, { log: false });
  });

  it('supports passing in state', () => {
    cy.navigate('/with-state', { foo: 'bar' });
  });
});