All Projects → cypress-io → instrument-cra

cypress-io / instrument-cra

Licence: MIT license
Little module for CRA applications to instrument code without ejecting react-scripts

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
CSS
56736 projects
shell
77523 projects

Projects that are alternatives of or similar to instrument-cra

next-and-cypress-example
Next.js example instrumented for code coverage from Cypress tests
Stars: ✭ 111 (+81.97%)
Mutual labels:  code-coverage, cypress-io
cypress-xpath
Adds XPath command to Cypress test runner
Stars: ✭ 145 (+137.7%)
Mutual labels:  cypress, cypress-io
Cypress Realworld App
A payment application to demonstrate real-world usage of Cypress testing methods, patterns, and workflows.
Stars: ✭ 2,888 (+4634.43%)
Mutual labels:  code-coverage, cypress
cypress-browserify-preprocessor
Cypress preprocessor for bundling JavaScript via browserify
Stars: ✭ 23 (-62.3%)
Mutual labels:  cypress, cypress-io
cypress-test-tiny
Tiny Cypress E2E test case
Stars: ✭ 48 (-21.31%)
Mutual labels:  cypress, cypress-io
cypress-mochawesome-reporter
Zero config Mochawesome reporter for Cypress with screenshots
Stars: ✭ 48 (-21.31%)
Mutual labels:  cypress, cypress-io
cypress-upload-file-post-form
Solution for two Cypress testing use-cases I came across with: perform a direct http FORM request to the server containing a file and other parameters and upload a file into a form before submission
Stars: ✭ 59 (-3.28%)
Mutual labels:  cypress, cypress-io
cypress-angularjs-unit-test
Unit test Angularjs code using Cypress.io test runner
Stars: ✭ 23 (-62.3%)
Mutual labels:  cypress, cypress-io
snapshot
Adds value / object / DOM element snapshot testing support to Cypress test runner
Stars: ✭ 114 (+86.89%)
Mutual labels:  cypress, cypress-io
cypress-example-todomvc-redux
Example TodoMVC application with full code coverage
Stars: ✭ 43 (-29.51%)
Mutual labels:  code-coverage, cypress
cypress-get-it
Get elements by data attribute by creating a Cy command on the fly
Stars: ✭ 23 (-62.3%)
Mutual labels:  cypress, cypress-io
cypress-example-docker-circle-workflows
Cypress + Docker + CircleCI Workflows = ❤️
Stars: ✭ 29 (-52.46%)
Mutual labels:  cypress, cypress-io
cypress-example-docker-compose
Example running Cypress tests against Apache server via docker-compose
Stars: ✭ 106 (+73.77%)
Mutual labels:  cypress, cypress-io
cypress-angular-unit-test
Trying to load and bootstrap Angular component dynamically inside Cypress
Stars: ✭ 146 (+139.34%)
Mutual labels:  cypress, cypress-io
todo-graphql-example
Example Todo app on top of json-graphql-server
Stars: ✭ 20 (-67.21%)
Mutual labels:  cypress, cypress-io
svelte-pwa-now
A PWA ready Svelte v3.0 starter template with Tailwind, Now integration and optional Typescript suppot
Stars: ✭ 138 (+126.23%)
Mutual labels:  cypress, cypress-io
cypress-watch-and-reload
Reloads Cypress when one of the watched files changes
Stars: ✭ 46 (-24.59%)
Mutual labels:  cypress, cypress-io
cypress-example-circleci-orb
Demo of using the Cypress CircleCI Orb
Stars: ✭ 26 (-57.38%)
Mutual labels:  cypress, cypress-io
cypress-hyperapp-unit-test
Unit test Hyperapp components using Cypress
Stars: ✭ 26 (-57.38%)
Mutual labels:  cypress, cypress-io
cypress-retry
Retry just the failed Cypress.io tests using Cypress module API and AST rewriting
Stars: ✭ 16 (-73.77%)
Mutual labels:  cypress, cypress-io

@cypress/instrument-cra renovate-app badge CircleCI

Little module for CRA applications to instrument code without ejecting react-scripts

Install and use

yarn add @cypress/instrument-cra

Then change your npm start script to require this module before starting the dev server

{
  "scripts": {
    "start": "react-scripts -r @cypress/instrument-cra start",
  }
}

This module assumes standard Create-React-App v3 JavaScript application with source files in the "src" folder.

When the app starts with yarn start, you should see the coverage information under window.__coverage__ information.

Coverage object

The instrumentation is done using Istanbul.js via babel-plugin-istanbul and is compatible with @cypress/code-coverage plugin.

Exclude files

If you want to exclude files from coverage, for example src/serviceWorker.js, add an object named nyc to package.json following the nyc CLI configuration.

{
  "nyc": {
    "exclude": "src/serviceWorker.js"
  }
}

Instrument a fork

To instrument a fork of react-scripts, provide the path to the new webpack.config.js in your package.json as cypressWebpackConfigPath, e.g.:

{
  "cypressWebpackConfigPath": "./node_modules/@my-org/my-react-scripts-fork/config/webpack.config.js"
}

Force instrumentation

Usually, the code is only instrumented in the development environment. If you want to force the instrumentation, set the environment variable

CYPRESS_INSTRUMENT_PRODUCTION=true

Debugging

Run with environment variable DEBUG=instrument-cra to see the verbose logs

Notes

If you try to start the application, and react-scripts shows an error There might be a problem with the project dependency tree., just create a local file .env with. The problem is due to several versions of babel-loader dependency between this plugin and your application.

SKIP_PREFLIGHT_CHECK=true

Examples

In this repository

External

License

MIT License, see LICENSE

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].