Skip to content

dan-cooke/cypress-autostub

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

cypress-autostub

Works with Cypress < 6 only

release

This plugin for the Cypress automation framework alleviates the need to mantain brittle manual mocks by automating the recording and stubbing of requests.

Features

  • Written in Typescript, strongly typed interfaces for all functions
  • Global default configs in JS
  • Local spec configs to override globals
  • Simple to setup + mantain, plug-n-play auto mocking
  • CI/Robot friendly (record with an env variable)
  • Whitelist routes that you want to be ignored by the cypress server

API Docs

View the API docs here

Installation

yarn install cypress-autostub

Setup

Setup the plugin along with any desired global settings in cypress/plugins/index.js

// Import the plugin
import { autoStubSetup } from 'cypress-autostub'

module.exports = (on, config) => {
    autoStubSetup(on, {
        // Global settings go here
    })
}

Import the stubbing/recording function in your spec files

example.spec.js

import { autoStub } from 'cypress-autostub'

describe('Some Feature', () => {
   // It MUST be called from inside the body of a describe block
    autoStub()
    
    beforeEach(() => {
        // ...
    })

    it('should do the thing', () => {
        // Your test code
    })
})

And you are good to go!


Recording

Recording is the process of listening to the network requests that are fired during the execution of your test, and writing the responses to disk.

Mock Files

Mock files are stored on disk in a format that can be directly plugged into cy.route.

The default location for these mock responses to be stored is cypress/mocks but this can be configured globally

The name of the mock file is tied to:

a: The currently executing spec

b: The currently executing test

So if you are running the following test in SomePage/example.spec.js:

describe('MyFeature', () => {
    it('should do a really important thing')
})

The mock file will by default be stored at:

cypress/mocks/SomePage/example/should do a really important thing.json

Note: The spacing in the file name is something I was not entirely happy with , and may be subject to change (or be configurable)

When does it record?

Provided the currently executing spec file has called autoStub , the plugin will begin recording if any of the following are true:

  1. CYPRESS_FORCE_RECORD is set in the environment
  2. forceRecord: true is set globally
  3. forceRecord: true is set locally

Force recording

There is no such thing as "cleaning" up your mock files. If a mock file already exists and the plugin is force recording. The previous mock file will be overwritten.

I believe this is the least error prone method of mantaining the mock files.


Stubbing

Stubbing is very simply calling:

cy.route()

With the data stored in the mock files used as arguments for the cy.route


Troubleshooting

How can I stub/record my fetch requests?

Cypress currently only supports XHR requests. However... Theres an open issue on Cypress with many suggested workarounds for converting your fetch requests into XHR

And more recently theres an experimentalFetchPolyfill option which you can enable in your cypress.json

About

This plugin for the Cypress automation framework alleviates the need to mantain brittle manual mocks by automating the recording and stubbing of requests.

Resources

Stars

Watchers

Forks

Packages

No packages published