= ({ children }) => {
6 | return
7 | }
8 |
9 | export default Button
10 |
--------------------------------------------------------------------------------
/test-apps/cra-e2e-and-ct/src/components/Stepper.cy.tsx:
--------------------------------------------------------------------------------
1 | ///
2 |
3 | import Stepper from './Stepper'
4 |
5 | describe('Stepper.cy.js', () => {
6 | const stepperSelector = '[data-testid=stepper]'
7 | const incrementSelector = '[aria-label=increment]'
8 | const decrementSelector = '[aria-label=decrement]'
9 |
10 | it('playground', () => {
11 | cy.mount()
12 | })
13 |
14 | it('stepper should default to 0', () => {
15 | // Arrange
16 | cy.mount()
17 | // Assert
18 | cy.get(stepperSelector).should('contain.text', 0)
19 | })
20 |
21 | it('can be incremented', () => {
22 | // Arrange
23 | cy.mount()
24 | // Act
25 | cy.get(incrementSelector).click()
26 | // Assert
27 | cy.get(stepperSelector).should('contain.text', 1)
28 | })
29 |
30 | it('can be decremented', () => {
31 | // Arrange
32 | cy.mount()
33 | // Act
34 | cy.get(decrementSelector).click()
35 | // Assert
36 | cy.get(stepperSelector).should('contain.text', -1)
37 | })
38 | })
39 |
--------------------------------------------------------------------------------
/test-apps/cra-e2e-and-ct/src/components/Stepper.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 |
3 | export default function Stepper({ initial = 0, onChange = (num: any) => {} }) {
4 | const [count, setCount] = useState(initial)
5 |
6 | const increment = () => {
7 | const newCount = count + 1
8 | setCount(newCount)
9 | onChange(newCount)
10 | }
11 |
12 | const decrement = () => {
13 | const newCount = count - 1
14 | setCount(newCount)
15 | onChange(newCount)
16 | }
17 |
18 | return (
19 |
20 |
23 | {count}
24 |
27 |
28 | )
29 | }
--------------------------------------------------------------------------------
/test-apps/cra-e2e-and-ct/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/test-apps/cra-e2e-and-ct/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import './index.css';
4 | import App from './App';
5 |
6 | const root = ReactDOM.createRoot(
7 | document.getElementById('root') as HTMLElement
8 | );
9 | root.render(
10 |
11 |
12 |
13 | );
14 |
15 |
--------------------------------------------------------------------------------
/test-apps/cra-e2e-and-ct/src/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-apps/cra-e2e-and-ct/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/test-apps/cra-e2e-and-ct/src/reportWebVitals.ts:
--------------------------------------------------------------------------------
1 | import { ReportHandler } from 'web-vitals';
2 |
3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
4 | if (onPerfEntry && onPerfEntry instanceof Function) {
5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
6 | getCLS(onPerfEntry);
7 | getFID(onPerfEntry);
8 | getFCP(onPerfEntry);
9 | getLCP(onPerfEntry);
10 | getTTFB(onPerfEntry);
11 | });
12 | }
13 | };
14 |
15 | export default reportWebVitals;
16 |
--------------------------------------------------------------------------------
/test-apps/cra-e2e-and-ct/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/test-apps/cra-e2e-and-ct/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "noFallthroughCasesInSwitch": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "noEmit": true,
21 | "jsx": "react-jsx"
22 | },
23 | "include": [
24 | "src", "cypress"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------
/test-apps/exclude-files/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": ["istanbul"]
3 | }
4 |
--------------------------------------------------------------------------------
/test-apps/exclude-files/README.md:
--------------------------------------------------------------------------------
1 | # example: exclude files
2 |
3 | Exclude some files from final coverage report by using `nyc` object in [package.json](package.json) file.
4 |
--------------------------------------------------------------------------------
/test-apps/exclude-files/cypress.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('cypress')
2 |
3 | module.exports = defineConfig({
4 | fixturesFolder: false,
5 | e2e: {
6 | setupNodeEvents(on, config) {
7 | return require('./cypress/plugins/index.js')(on, config)
8 | },
9 | baseUrl: 'http://localhost:1234',
10 | },
11 | })
12 |
--------------------------------------------------------------------------------
/test-apps/exclude-files/cypress/e2e/spec.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 | it('works', () => {
3 | cy.visit('/')
4 | cy.contains('Page body')
5 |
6 | cy.window()
7 | .invoke('reverse', 'super')
8 | .should('equal', 'repus')
9 | })
10 |
--------------------------------------------------------------------------------
/test-apps/exclude-files/cypress/plugins/index.js:
--------------------------------------------------------------------------------
1 | module.exports = (on, config) => {
2 | require('@cypress/code-coverage/task')(on, config)
3 | return config
4 | }
5 |
--------------------------------------------------------------------------------
/test-apps/exclude-files/cypress/support/commands.js:
--------------------------------------------------------------------------------
1 | import '@cypress/code-coverage/support'
2 | console.log('this is commands file')
3 |
--------------------------------------------------------------------------------
/test-apps/exclude-files/cypress/support/e2e.js:
--------------------------------------------------------------------------------
1 | require('./commands')
2 |
--------------------------------------------------------------------------------
/test-apps/exclude-files/index.html:
--------------------------------------------------------------------------------
1 |
2 | Page body
3 |
4 |
5 |
17 |
18 |
--------------------------------------------------------------------------------
/test-apps/exclude-files/main.js:
--------------------------------------------------------------------------------
1 | window.add = (a, b) => a + b
2 |
3 | window.sub = (a, b) => a - b
4 |
--------------------------------------------------------------------------------
/test-apps/exclude-files/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example-exclude-files",
3 | "description": "Exclude some files from final coverage report",
4 | "scripts": {
5 | "cy:run": "cypress run",
6 | "start": "parcel serve index.html",
7 | "pretest": "rimraf .nyc_output .cache coverage dist",
8 | "test": "start-test 1234 cy:run",
9 | "coverage:verify": "npx nyc report --check-coverage true --lines 100",
10 | "coverage:check-files": "check-coverage main.js && only-covered --from coverage/coverage-final.json main.js"
11 | },
12 | "nyc": {
13 | "exclude": [
14 | "second.js"
15 | ],
16 | "excludeAfterRemap": true
17 | },
18 | "devDependencies": {
19 | "@babel/core": "7.27.1"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/test-apps/exclude-files/second.js:
--------------------------------------------------------------------------------
1 | // this file should be excluded from the final coverage numbers
2 | // using "nyc.exclude" list in package.json
3 | window.reverse = s =>
4 | s
5 | .split('')
6 | .reverse()
7 | .join('')
8 |
--------------------------------------------------------------------------------
/test-apps/frontend/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": ["istanbul"],
3 | "ignore": ["**/*.cy.js"]
4 | }
5 |
--------------------------------------------------------------------------------
/test-apps/frontend/README.md:
--------------------------------------------------------------------------------
1 | # example: frontend
2 |
3 | Tests a frontend app
4 |
--------------------------------------------------------------------------------
/test-apps/frontend/about.html:
--------------------------------------------------------------------------------
1 |
2 | About
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/test-apps/frontend/about.js:
--------------------------------------------------------------------------------
1 | document
2 | .getElementById('content')
3 | .appendChild(document.createTextNode('Est. 2019'))
4 |
--------------------------------------------------------------------------------
/test-apps/frontend/app.js:
--------------------------------------------------------------------------------
1 | import { map } from 'lodash'
2 |
3 | const list = [{ name: 'joe' }, { name: 'mary' }]
4 | const names = map(list, 'name')
5 | console.log('just names', names)
6 |
--------------------------------------------------------------------------------
/test-apps/frontend/cypress.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('cypress')
2 |
3 | module.exports = defineConfig({
4 | fixturesFolder: false,
5 | e2e: {
6 | setupNodeEvents(on, config) {
7 | return require('./cypress/plugins/index.js')(on, config)
8 | },
9 | hosts: {
10 | 'foobar.com': '127.0.0.1',
11 | },
12 | baseUrl: 'http://localhost:1234',
13 | env: {
14 | codeCoverage: {
15 | exclude: ['cypress/**/*.*']
16 | }
17 | }
18 | }
19 | })
20 |
--------------------------------------------------------------------------------
/test-apps/frontend/cypress/e2e/spec.cy.js:
--------------------------------------------------------------------------------
1 | // enables intelligent code completion for Cypress commands
2 | // https://on.cypress.io/intelligent-code-completion
3 | ///
4 |
5 | import { add } from '../../unit'
6 |
7 | context('Page test', () => {
8 | beforeEach(() => {
9 | cy.visit('/', {
10 | onBeforeLoad(win) {
11 | cy.spy(win.console, 'log').as('log')
12 | }
13 | })
14 | })
15 |
16 | it('logs names', function() {
17 | cy.get('@log')
18 | .should('have.been.calledOnce')
19 | .should('have.been.calledWith', 'just names', ['joe', 'mary'])
20 | })
21 |
22 | it('loads About page', () => {
23 | cy.contains('About').click()
24 | cy.url().should('match', /\/about/)
25 | cy.contains('h2', 'About')
26 | cy.contains('Est. 2019')
27 | })
28 |
29 | it('loads cross origin page using cy.origin', () => {
30 | cy.origin('http://foobar.com:1234', () => {
31 | cy.visit('/')
32 | })
33 | })
34 |
35 | it('loads cross origin page without cy.origin', () => {
36 | cy.visit('http://foobar.com:1234')
37 | })
38 | })
39 |
40 | context('Unit tests', () => {
41 | it('adds numbers', () => {
42 | expect(add(2, 3)).to.equal(5)
43 | })
44 |
45 | it('concatenates strings', () => {
46 | expect(add('foo', 'Bar')).to.equal('fooBar')
47 | })
48 |
49 | })
50 |
--------------------------------------------------------------------------------
/test-apps/frontend/cypress/plugins/index.js:
--------------------------------------------------------------------------------
1 | module.exports = (on, config) => {
2 | require('@cypress/code-coverage/task')(on, config)
3 | //Used to instrument code tested like unit tests
4 | on('file:preprocessor', require('@cypress/code-coverage/use-babelrc'))
5 | return config
6 | }
7 |
--------------------------------------------------------------------------------
/test-apps/frontend/cypress/support/commands.js:
--------------------------------------------------------------------------------
1 | import '@cypress/code-coverage/support'
2 | console.log('this is commands file')
3 |
--------------------------------------------------------------------------------
/test-apps/frontend/cypress/support/e2e.js:
--------------------------------------------------------------------------------
1 | require('./commands')
2 |
--------------------------------------------------------------------------------
/test-apps/frontend/index.html:
--------------------------------------------------------------------------------
1 |
2 |
5 | Test page
6 | Open the DevTools to see console messages
7 |
8 |
9 |
--------------------------------------------------------------------------------
/test-apps/frontend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example-frontend",
3 | "description": "Tests a frontend app",
4 | "scripts": {
5 | "cy:run": "cypress run",
6 | "start": "parcel serve index.html",
7 | "pretest": "rimraf .nyc_output .cache coverage dist",
8 | "test": "start-test 1234 cy:run",
9 | "coverage:verify": "npx nyc report --check-coverage true --lines 100",
10 | "coverage:check-files": "check-coverage app.js && check-coverage about.js && check-coverage unit.js && only-covered app.js about.js unit.js"
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/test-apps/frontend/unit.js:
--------------------------------------------------------------------------------
1 | export const add = (a, b) => a + b
2 |
--------------------------------------------------------------------------------
/test-apps/fullstack/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": ["istanbul"]
3 | }
4 |
--------------------------------------------------------------------------------
/test-apps/fullstack/README.md:
--------------------------------------------------------------------------------
1 | # example: fullstack
2 |
3 | > Combined code coverage from the backend code, and e2e and unit tests
4 |
5 | This example runs instrumented server code, that serves instrumented frontend code, and instruments the unit tests on the fly. The final report combines all 3 sources of information.
6 |
7 | To run
8 |
9 | ```sh
10 | $ npm run test
11 | ```
12 |
13 | You should see messages from the plugin when it saves each coverage object
14 |
15 | 
16 |
17 | In the produced report, you should see
18 |
19 | - `server/server.js` coverage for backend
20 | - `main.js` coverage from end-to-end tests
21 | - `string-utils.js` coverage from unit tests
22 |
--------------------------------------------------------------------------------
/test-apps/fullstack/cypress.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('cypress')
2 |
3 | module.exports = defineConfig({
4 | fixturesFolder: false,
5 | env: {
6 | codeCoverage: {
7 | url: 'http://localhost:1234/__coverage__',
8 | exclude: 'cypress/**/*.*'
9 | }
10 | },
11 | e2e: {
12 | setupNodeEvents(on, config) {
13 | return require('./cypress/plugins/index.js')(on, config)
14 | },
15 | baseUrl: 'http://localhost:1234'
16 | }
17 | })
18 |
--------------------------------------------------------------------------------
/test-apps/fullstack/cypress/e2e/spec.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 |
3 | // load extra files to instrument on the fly
4 | const { reverse } = require('../../string-utils')
5 |
6 | it('uses frontend code and calls backend', () => {
7 | cy.visit('/')
8 | cy.contains('Page body').should('be.visible')
9 |
10 | cy.window()
11 | .invoke('add', 2, 3)
12 | .should('equal', 5)
13 |
14 | cy.window()
15 | .invoke('sub', 2, 3)
16 | .should('equal', -1)
17 |
18 | cy.log('**backend request**')
19 | cy.request('/hello')
20 |
21 | cy.log('**unit test**')
22 | expect(reverse('Hello')).to.equal('olleH')
23 | })
24 |
--------------------------------------------------------------------------------
/test-apps/fullstack/cypress/plugins/index.js:
--------------------------------------------------------------------------------
1 | module.exports = (on, config) => {
2 | require('@cypress/code-coverage/task')(on, config)
3 | //Used to instrument code ran like unit tests
4 | on('file:preprocessor', require('@cypress/code-coverage/use-babelrc'))
5 | return config
6 | }
7 |
--------------------------------------------------------------------------------
/test-apps/fullstack/cypress/support/e2e.js:
--------------------------------------------------------------------------------
1 | import '@cypress/code-coverage/support'
2 |
--------------------------------------------------------------------------------
/test-apps/fullstack/images/fullstack.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/code-coverage/127b589b25e5a9a22657ac6c89277044886bfb9e/test-apps/fullstack/images/fullstack.png
--------------------------------------------------------------------------------
/test-apps/fullstack/index.html:
--------------------------------------------------------------------------------
1 |
2 | Page body
3 |
4 |
5 |
--------------------------------------------------------------------------------
/test-apps/fullstack/main.js:
--------------------------------------------------------------------------------
1 | window.add = (a, b) => a + b
2 |
3 | window.sub = (a, b) => a - b
4 |
--------------------------------------------------------------------------------
/test-apps/fullstack/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example-fullstack",
3 | "description": "Combined code coverage from the backend code, and e2e and unit tests",
4 | "scripts": {
5 | "prestart": "parcel build index.html",
6 | "start": "nyc --silent node server/server",
7 | "cy:run": "cypress run",
8 | "pretest": "rimraf .nyc_output .cache coverage dist",
9 | "test": "start-test 1234 cy:run",
10 | "coverage:verify": "npx nyc report --check-coverage true --lines 100",
11 | "coverage:check-files": "check-coverage fullstack/server/server.js && check-coverage fullstack/main.js && check-coverage fullstack/string-utils.js && only-covered server.js main.js string-utils.js"
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/test-apps/fullstack/server/server.js:
--------------------------------------------------------------------------------
1 | const express = require('express')
2 | const path = require('path')
3 | const app = express()
4 | const port = 1234
5 |
6 | // if there is code coverage information
7 | // then expose an endpoint that returns it
8 | /* istanbul ignore next */
9 | if (global.__coverage__) {
10 | console.log('have code coverage, will add middleware for express')
11 | console.log(`to fetch: GET :${port}/__coverage__`)
12 | require('@cypress/code-coverage/middleware/express')(app)
13 | }
14 |
15 | app.use(express.static(path.join(__dirname, '../dist')))
16 |
17 | app.get('/hello', (req, res) => {
18 | console.log('sending hello world')
19 | res.send('Hello World!')
20 | })
21 |
22 | app.listen(port, () => console.log(`Example app listening on port ${port}!`))
23 |
--------------------------------------------------------------------------------
/test-apps/fullstack/string-utils.js:
--------------------------------------------------------------------------------
1 | // reverses a string
2 | const reverse = s => {
3 | return s
4 | .split('')
5 | .reverse()
6 | .join('')
7 | }
8 | module.exports = {
9 | reverse
10 | }
11 |
--------------------------------------------------------------------------------
/test-apps/multiple-backends/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": ["istanbul"]
3 | }
4 |
--------------------------------------------------------------------------------
/test-apps/multiple-backends/README.md:
--------------------------------------------------------------------------------
1 | # example: multiple backends
2 |
3 | > Getting code coverage from multiple backends
4 |
--------------------------------------------------------------------------------
/test-apps/multiple-backends/cypress.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('cypress')
2 |
3 | module.exports = defineConfig({
4 | fixturesFolder: false,
5 | env: {
6 | codeCoverage: {
7 | url: ['http://localhost:3003/__coverage__', 'http://localhost:3004/__coverage__'],
8 | expectBackendCoverageOnly: true,
9 | },
10 | },
11 | e2e: {
12 | setupNodeEvents(on, config) {
13 | return require('./cypress/plugins/index.js')(on, config)
14 | },
15 | baseUrl: 'http://localhost:3003',
16 | },
17 | })
18 |
--------------------------------------------------------------------------------
/test-apps/multiple-backends/cypress/e2e/spec.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 | it('has multiple backends with code coverage', () => {
3 | cy.visit('/')
4 | cy.request('/hello')
5 | cy.request('http://localhost:3004/world')
6 | })
7 |
--------------------------------------------------------------------------------
/test-apps/multiple-backends/cypress/plugins/index.js:
--------------------------------------------------------------------------------
1 | module.exports = (on, config) => {
2 | require('@cypress/code-coverage/task')(on, config)
3 | return config
4 | }
5 |
--------------------------------------------------------------------------------
/test-apps/multiple-backends/cypress/support/e2e.js:
--------------------------------------------------------------------------------
1 | import '@cypress/code-coverage/support'
2 |
--------------------------------------------------------------------------------
/test-apps/multiple-backends/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example-multiple-backends",
3 | "description": "Code coverage for multiple backends",
4 | "private": true,
5 | "scripts": {
6 | "cy:run": "cypress run",
7 | "start": "nyc --silent node server/server-3003 & nyc --silent node server/server-3004",
8 | "pretest": "rimraf .nyc_output .cache coverage dist",
9 | "test": "start-test \"3003|3004\" cy:run",
10 | "coverage:verify": "npx nyc report --check-coverage true --lines 100",
11 | "coverage:check-files": "check-coverage server-3003.js server-3004.js && only-covered server-3003.js server-3004.js"
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/test-apps/multiple-backends/server/index.html:
--------------------------------------------------------------------------------
1 |
2 | test multiple backends
3 |
4 |
--------------------------------------------------------------------------------
/test-apps/multiple-backends/server/server-3003.js:
--------------------------------------------------------------------------------
1 | const express = require('express')
2 | const app = express()
3 | const port = 3003
4 |
5 | // if there is code coverage information
6 | // then expose an endpoint that returns it
7 | /* istanbul ignore next */
8 | if (global.__coverage__) {
9 | console.log('have code coverage, will add middleware for express')
10 | console.log(`to fetch: GET :${port}/__coverage__`)
11 | require('@cypress/code-coverage/middleware/express')(app)
12 | }
13 |
14 | app.use(express.static(__dirname))
15 |
16 | app.get('/hello', (req, res) => {
17 | console.log('sending hello')
18 | res.send('Hello')
19 | })
20 |
21 | app.listen(port, () => console.log(`Example app listening on port ${port}!`))
22 |
--------------------------------------------------------------------------------
/test-apps/multiple-backends/server/server-3004.js:
--------------------------------------------------------------------------------
1 | const express = require('express')
2 | const app = express()
3 | const port = 3004
4 |
5 | // if there is code coverage information
6 | // then expose an endpoint that returns it
7 | /* istanbul ignore next */
8 | if (global.__coverage__) {
9 | console.log('have code coverage, will add middleware for express')
10 | console.log(`to fetch: GET :${port}/__coverage__`)
11 | require('@cypress/code-coverage/middleware/express')(app)
12 | }
13 |
14 | app.use(express.static(__dirname))
15 |
16 | app.get('/world', (req, res) => {
17 | console.log('sending world')
18 | res.send('World!')
19 | })
20 |
21 | app.listen(port, () => console.log(`Example app listening on port ${port}!`))
22 |
--------------------------------------------------------------------------------
/test-apps/one-spec/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": ["istanbul"]
3 | }
4 |
--------------------------------------------------------------------------------
/test-apps/one-spec/README.md:
--------------------------------------------------------------------------------
1 | # example: one-spec
2 |
3 | Only running a single spec using a specFiles pattern
4 |
--------------------------------------------------------------------------------
/test-apps/one-spec/cypress.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('cypress')
2 |
3 | module.exports = defineConfig({
4 | fixturesFolder: false,
5 | e2e: {
6 | setupNodeEvents(on, config) {
7 | return require('./cypress/plugins/index.js')(on, config)
8 | },
9 | baseUrl: 'http://localhost:1234',
10 | specPattern: 'cypress/e2e/spec-a.cy.js',
11 | },
12 | })
13 |
--------------------------------------------------------------------------------
/test-apps/one-spec/cypress/e2e/spec-a.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 | it('spec a', () => {
3 | cy.visit('/')
4 | cy.contains('Page body')
5 |
6 | cy.window()
7 | .invoke('add', 2, 3)
8 | .should('equal', 5)
9 |
10 | cy.window()
11 | .invoke('sub', 2, 3)
12 | .should('equal', -1)
13 | })
14 |
--------------------------------------------------------------------------------
/test-apps/one-spec/cypress/e2e/spec-b.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 | it('spec b', () => {
3 | // should not run
4 | throw new Error('Spec b should not run')
5 | })
6 |
--------------------------------------------------------------------------------
/test-apps/one-spec/cypress/plugins/index.js:
--------------------------------------------------------------------------------
1 | module.exports = (on, config) => {
2 | require('@cypress/code-coverage/task')(on, config)
3 | return config
4 | }
5 |
--------------------------------------------------------------------------------
/test-apps/one-spec/cypress/support/e2e.js:
--------------------------------------------------------------------------------
1 | import '@cypress/code-coverage/support'
2 |
--------------------------------------------------------------------------------
/test-apps/one-spec/index.html:
--------------------------------------------------------------------------------
1 |
2 | Page body
3 |
4 |
8 |
9 |
--------------------------------------------------------------------------------
/test-apps/one-spec/main.js:
--------------------------------------------------------------------------------
1 | window.add = (a, b) => a + b
2 |
3 | window.sub = (a, b) => a - b
4 |
--------------------------------------------------------------------------------
/test-apps/one-spec/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example-one-spec",
3 | "description": "Only running a single spec",
4 | "scripts": {
5 | "cy:run": "cypress run",
6 | "start": "parcel serve index.html",
7 | "pretest": "rimraf .nyc_output .cache coverage dist",
8 | "test": "start-test 1234 cy:run",
9 | "coverage:verify": "npx nyc report --check-coverage true --lines 100",
10 | "coverage:check-files": "check-coverage main.js && only-covered main.js"
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/test-apps/redirect/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": ["istanbul"]
3 | }
4 |
--------------------------------------------------------------------------------
/test-apps/redirect/.nycrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "exclude": [
3 | "app.js"
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/test-apps/redirect/README.md:
--------------------------------------------------------------------------------
1 | # example: redirect
2 |
3 | Tests a frontend app that redirects, through un-instrumented code, back to itself.
4 |
--------------------------------------------------------------------------------
/test-apps/redirect/app.js:
--------------------------------------------------------------------------------
1 | // This redirect code needs to be un-instrumented (excluded in .nycrc.json)
2 | // - If the redirect code is instrumented, Cypress would then treat them as different coverage objects and merge the code coverage (not testing what we want).
3 | // - If the redirect code is un-instrumented, Cypress can't tell them apart and will update the existing coverage object to point to the correct one (testing what we want).
4 |
5 | import { returnToApp } from './utils'
6 |
7 | // Timeouts are necessary to allow cypress to pick up the "initial" coverage object and compare it to the existing coverage objects.
8 | new Promise((resolve) => {
9 | if (window.location.port === '1234' && !localStorage.getItem('visited')) {
10 | localStorage.setItem('visited', true)
11 | console.log('Not visited. Redirecting')
12 | setTimeout(() => {
13 | window.location.href = 'http://localhost:1235'
14 | }, 500)
15 | } else if (window.location.port === '1235') {
16 | console.log('Redirecting back.')
17 | setTimeout(() => {
18 | window.location.href = 'http://localhost:1234'
19 | }, 500)
20 | } else {
21 | console.log('Visited');
22 | setTimeout(() => {
23 | resolve()
24 | }, 500)
25 | }
26 | }).then(() => {
27 | returnToApp()
28 | })
29 |
--------------------------------------------------------------------------------
/test-apps/redirect/cypress.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('cypress')
2 |
3 | module.exports = defineConfig({
4 | fixturesFolder: false,
5 | e2e: {
6 | setupNodeEvents(on, config) {
7 | require('@cypress/code-coverage/task')(on, config)
8 | return config
9 | },
10 | baseUrl: 'http://localhost:1234',
11 | env: {
12 | codeCoverage: {
13 | exclude: ['cypress/**/*.*']
14 | }
15 | },
16 | chromeWebSecurity: false
17 | }
18 | })
19 |
--------------------------------------------------------------------------------
/test-apps/redirect/cypress/e2e/spec.cy.js:
--------------------------------------------------------------------------------
1 | // enables intelligent code completion for Cypress commands
2 | // https://on.cypress.io/intelligent-code-completion
3 | ///
4 |
5 | context('Page test', () => {
6 | it('redirects back to the app', function() {
7 | cy.clearLocalStorage()
8 | cy.visit("http://localhost:1234")
9 | cy.contains("Returned to app")
10 | })
11 | })
12 |
--------------------------------------------------------------------------------
/test-apps/redirect/cypress/support/e2e.js:
--------------------------------------------------------------------------------
1 | import '@cypress/code-coverage/support'
2 |
--------------------------------------------------------------------------------
/test-apps/redirect/index.html:
--------------------------------------------------------------------------------
1 |
2 | Test page
3 |
4 |
5 |
--------------------------------------------------------------------------------
/test-apps/redirect/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example-redirect",
3 | "description": "Tests a frontend app that redirects, through un-instrumented code, back to itself.",
4 | "devDependencies": {
5 | "@babel/core": "^7.12.0"
6 | },
7 | "scripts": {
8 | "cy:run": "cypress run",
9 | "start:app": "parcel serve -p 1234 index.html",
10 | "start:other-app": "parcel serve -p 1235 index.html",
11 | "pretest": "rimraf .nyc_output .cache coverage dist",
12 | "test": "start-test start:app http://localhost:1234 start:other-app http://localhost:1235 cy:run",
13 | "coverage:verify": "npx nyc report --check-coverage true --lines 100",
14 | "coverage:check-files": "check-coverage utils.js && only-covered utils.js"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/test-apps/redirect/utils.js:
--------------------------------------------------------------------------------
1 | export const returnToApp = () => {
2 | document.body
3 | .appendChild(document.createTextNode('Returned to app'))
4 | }
5 |
--------------------------------------------------------------------------------
/test-apps/same-folder/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": ["istanbul"]
3 | }
4 |
--------------------------------------------------------------------------------
/test-apps/same-folder/README.md:
--------------------------------------------------------------------------------
1 | # example: same-folder
2 |
3 | Check if test files are correctly filtered out
4 |
--------------------------------------------------------------------------------
/test-apps/same-folder/cypress.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('cypress')
2 |
3 | module.exports = defineConfig({
4 | e2e: {
5 | setupNodeEvents(on, config) {
6 | return require('./plugins.js')(on, config)
7 | },
8 | specPattern: './**/spec.js',
9 | supportFile: 'support.js',
10 | baseUrl: 'http://localhost:1234',
11 | env: {
12 | codeCoverage: {
13 | exclude: ['spec.js', 'support.js']
14 | }
15 | }
16 | },
17 | })
18 |
--------------------------------------------------------------------------------
/test-apps/same-folder/cypress/fixtures/example.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Using fixtures to represent data",
3 | "email": "hello@cypress.io",
4 | "body": "Fixtures are a great way to mock data for responses to routes"
5 | }
--------------------------------------------------------------------------------
/test-apps/same-folder/index.html:
--------------------------------------------------------------------------------
1 |
2 | Page body
3 |
4 |
5 |
--------------------------------------------------------------------------------
/test-apps/same-folder/main.js:
--------------------------------------------------------------------------------
1 | window.add = (a, b) => a + b
2 |
3 | window.sub = (a, b) => a - b
4 |
--------------------------------------------------------------------------------
/test-apps/same-folder/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example-same-folder",
3 | "description": "Check if test files are correctly filtered out",
4 | "scripts": {
5 | "cy:run": "cypress run",
6 | "start": "parcel serve index.html",
7 | "pretest": "rimraf .nyc_output .cache coverage dist",
8 | "test": "start-test 1234 cy:run",
9 | "coverage:verify": "npx nyc report --check-coverage true --lines 100",
10 | "coverage:check-files": "check-coverage main.js && check-coverage unit-utils.js && only-covered main.js unit-utils.js"
11 | },
12 | "devDependencies": {
13 | "@babel/core": "^7.22.15"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/test-apps/same-folder/plugins.js:
--------------------------------------------------------------------------------
1 | module.exports = (on, config) => {
2 | require('@cypress/code-coverage/task')(on, config)
3 | on('file:preprocessor', require('@cypress/code-coverage/use-babelrc'))
4 | return config
5 | }
6 |
--------------------------------------------------------------------------------
/test-apps/same-folder/spec.js:
--------------------------------------------------------------------------------
1 | ///
2 |
3 | import { reverse } from './unit-utils'
4 |
5 | describe('coverage information', () => {
6 | beforeEach(() => {
7 | cy.log('visiting /')
8 | cy.visit('/')
9 | })
10 |
11 | it('calls add', () => {
12 | cy.window()
13 | .invoke('add', 2, 3)
14 | .should('equal', 5)
15 | })
16 |
17 | it('calls sub', () => {
18 | cy.window()
19 | .invoke('sub', 2, 3)
20 | .should('equal', -1)
21 | })
22 |
23 | it('reverses a string', () => {
24 | expect(reverse('Hello')).to.equal('olleH')
25 | })
26 | })
27 |
--------------------------------------------------------------------------------
/test-apps/same-folder/support.js:
--------------------------------------------------------------------------------
1 | import '@cypress/code-coverage/support'
2 |
--------------------------------------------------------------------------------
/test-apps/same-folder/unit-utils.js:
--------------------------------------------------------------------------------
1 | export const reverse = s =>
2 | s
3 | .split('')
4 | .reverse()
5 | .join('')
6 |
--------------------------------------------------------------------------------
/test-apps/support-files/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": ["istanbul"]
3 | }
4 |
--------------------------------------------------------------------------------
/test-apps/support-files/README.md:
--------------------------------------------------------------------------------
1 | # example: support-files
2 |
3 | Filtering out support files
4 |
--------------------------------------------------------------------------------
/test-apps/support-files/cypress.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('cypress')
2 |
3 | module.exports = defineConfig({
4 | fixturesFolder: false,
5 | e2e: {
6 | setupNodeEvents(on, config) {
7 | return require('./cypress/plugins/index.js')(on, config)
8 | },
9 | baseUrl: 'http://localhost:1234',
10 | env: {
11 | codeCoverage: {
12 | exclude: ['cypress/**/**.*']
13 | }
14 | }
15 | },
16 | })
17 |
--------------------------------------------------------------------------------
/test-apps/support-files/cypress/e2e/spec.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 | it('works', () => {
3 | cy.visit('/')
4 | cy.contains('Page body')
5 | })
6 |
--------------------------------------------------------------------------------
/test-apps/support-files/cypress/plugins/index.js:
--------------------------------------------------------------------------------
1 | module.exports = (on, config) => {
2 | require('@cypress/code-coverage/task')(on, config)
3 | on('file:preprocessor', require('@cypress/code-coverage/use-babelrc'))
4 | return config
5 | }
6 |
--------------------------------------------------------------------------------
/test-apps/support-files/cypress/support/commands.js:
--------------------------------------------------------------------------------
1 | import '@cypress/code-coverage/support'
2 | console.log('this is commands file')
3 |
--------------------------------------------------------------------------------
/test-apps/support-files/cypress/support/e2e.js:
--------------------------------------------------------------------------------
1 | require('./commands')
2 |
--------------------------------------------------------------------------------
/test-apps/support-files/index.html:
--------------------------------------------------------------------------------
1 |
2 | Page body
3 |
4 |
13 |
14 |
--------------------------------------------------------------------------------
/test-apps/support-files/main.js:
--------------------------------------------------------------------------------
1 | window.add = (a, b) => a + b
2 |
3 | window.sub = (a, b) => a - b
4 |
--------------------------------------------------------------------------------
/test-apps/support-files/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example-support-files",
3 | "description": "Filtering out support files",
4 | "scripts": {
5 | "cy:run": "cypress run",
6 | "start": "parcel serve index.html",
7 | "pretest": "rimraf .nyc_output .cache coverage dist",
8 | "test": "start-test 1234 cy:run",
9 | "coverage:verify": "npx nyc report --check-coverage true --lines 100",
10 | "coverage:check-files": "check-coverage main.js && only-covered main.js"
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/test-apps/ts-example/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": ["istanbul"]
3 | }
4 |
--------------------------------------------------------------------------------
/test-apps/ts-example/README.md:
--------------------------------------------------------------------------------
1 | # example: ts-example
2 |
3 | Code coverage for TypeScript code. See [nyc TS support](https://github.com/istanbuljs/nyc#typescript-projects) docs too.
4 |
--------------------------------------------------------------------------------
/test-apps/ts-example/calc.ts:
--------------------------------------------------------------------------------
1 | export const add = (a: number, b: number) => {
2 | return a + b
3 | }
4 |
--------------------------------------------------------------------------------
/test-apps/ts-example/cypress.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('cypress')
2 |
3 | module.exports = defineConfig({
4 | fixturesFolder: false,
5 | e2e: {
6 | setupNodeEvents(on, config) {
7 | return require('./cypress/plugins/index.js')(on, config)
8 | },
9 | baseUrl: 'http://localhost:1234',
10 | },
11 | })
12 |
--------------------------------------------------------------------------------
/test-apps/ts-example/cypress/e2e/spec.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 | describe('ts-example', () => {
3 | beforeEach(() => {
4 | cy.visit('/')
5 | })
6 |
7 | it('calls add', () => {
8 | cy.window()
9 | .invoke('add', 2, 3)
10 | .should('equal', 5)
11 | })
12 |
13 | it('calls sub', () => {
14 | cy.window()
15 | .invoke('sub', 2, 3)
16 | .should('equal', -1)
17 | })
18 |
19 | it('calls abs twice', () => {
20 | cy.window()
21 | .invoke('abs', 2)
22 | .should('equal', 2)
23 |
24 | cy.window()
25 | .invoke('abs', -5)
26 | .should('equal', 5)
27 | })
28 | })
29 |
--------------------------------------------------------------------------------
/test-apps/ts-example/cypress/plugins/index.js:
--------------------------------------------------------------------------------
1 | module.exports = (on, config) => {
2 | require('@cypress/code-coverage/task')(on, config)
3 | return config
4 | }
5 |
--------------------------------------------------------------------------------
/test-apps/ts-example/cypress/support/e2e.js:
--------------------------------------------------------------------------------
1 | import '@cypress/code-coverage/support'
2 |
--------------------------------------------------------------------------------
/test-apps/ts-example/index.html:
--------------------------------------------------------------------------------
1 |
2 | Page body
3 |
4 |
5 |
--------------------------------------------------------------------------------
/test-apps/ts-example/main.ts:
--------------------------------------------------------------------------------
1 | import { add } from './calc'
2 |
3 | const sub = (a: number, b: number) => {
4 | return a - b
5 | }
6 |
7 | function abs(x: number) {
8 | if (x >= 0) {
9 | return x
10 | } else {
11 | return -x
12 | }
13 | }
14 |
15 | // @ts-ignore
16 | window.add = add
17 | // @ts-ignore
18 | window.sub = sub
19 | // @ts-ignore
20 | window.abs = abs
21 |
--------------------------------------------------------------------------------
/test-apps/ts-example/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example-before-each-visit",
3 | "description": "Getting code coverage when cy.visit is used in beforeEach hook",
4 | "devDependencies": {
5 | "typescript": "^4.5.5"
6 | },
7 | "scripts": {
8 | "cy:run": "cypress run",
9 | "start": "parcel serve index.html",
10 | "pretest": "rimraf .nyc_output .cache coverage dist",
11 | "test": "start-test 1234 cy:run",
12 | "coverage:verify": "npx nyc report --check-coverage true --lines 100",
13 | "coverage:check-files": "check-coverage main.ts && check-coverage calc.ts && only-covered main.ts calc.ts"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/test-apps/unit-tests-js/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": ["istanbul"]
3 | }
4 |
--------------------------------------------------------------------------------
/test-apps/unit-tests-js/README.md:
--------------------------------------------------------------------------------
1 | # example: unit-tests-js
2 |
3 | Examples that only run unit tests written using JavaScript
4 |
--------------------------------------------------------------------------------
/test-apps/unit-tests-js/cypress.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('cypress')
2 |
3 | module.exports = defineConfig({
4 | fixturesFolder: false,
5 | e2e: {
6 | setupNodeEvents(on, config) {
7 | return require('./cypress/plugins/index.js')(on, config)
8 | },
9 | env: {
10 | codeCoverage: {
11 | exclude: 'cypress/**/*.*'
12 | }
13 | }
14 | },
15 | })
16 |
--------------------------------------------------------------------------------
/test-apps/unit-tests-js/cypress/e2e/spec-a.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 | import { isObject, add } from '../../src/utils/misc'
3 |
4 | describe('unit tests', () => {
5 | it('adds two numbers', () => {
6 | expect(add(2, 3)).to.equal(5)
7 | })
8 |
9 | it('checks for object', () => {
10 | expect(isObject({}), '{}').to.be.true
11 | expect(isObject([]), '[]').to.be.true
12 | })
13 | })
14 |
--------------------------------------------------------------------------------
/test-apps/unit-tests-js/cypress/e2e/spec-b.cy.js:
--------------------------------------------------------------------------------
1 | // enables intelligent code completion for Cypress commands
2 | // https://on.cypress.io/intelligent-code-completion
3 | ///
4 |
5 | import { sub } from '../../src/utils/math'
6 |
7 | describe('Unit tests', () => {
8 | it('subtracts numbers', () => {
9 | expect(sub(10, 4)).to.equal(6)
10 | })
11 | })
12 |
--------------------------------------------------------------------------------
/test-apps/unit-tests-js/cypress/plugins/index.js:
--------------------------------------------------------------------------------
1 | module.exports = (on, config) => {
2 | require('@cypress/code-coverage/task')(on, config)
3 | //used to instrument files included as unit tests
4 | on('file:preprocessor', require('@cypress/code-coverage/use-babelrc'))
5 | return config
6 | }
7 |
--------------------------------------------------------------------------------
/test-apps/unit-tests-js/cypress/support/e2e.js:
--------------------------------------------------------------------------------
1 | import '@cypress/code-coverage/support'
2 |
--------------------------------------------------------------------------------
/test-apps/unit-tests-js/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example-unit-tests-js",
3 | "description": "Run unit tests written using JavaScript",
4 | "scripts": {
5 | "pretest": "rimraf .nyc_output .cache coverage dist",
6 | "test": "cypress run",
7 | "coverage:verify": "npx nyc report --check-coverage true --lines 100",
8 | "coverage:check-files": "check-coverage misc.js math.js && only-covered misc.js math.js"
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/test-apps/unit-tests-js/src/utils/math.js:
--------------------------------------------------------------------------------
1 | export const sub = (a, b) => a - b
2 |
--------------------------------------------------------------------------------
/test-apps/unit-tests-js/src/utils/misc.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Very simple check, returns true for arrays as well
3 | */
4 | export function isObject(object) {
5 | return object != null && typeof object === 'object'
6 | }
7 |
8 | /**
9 | * Adds two numbers together
10 | * @param {number} a
11 | * @param {number} b
12 | */
13 | export const add = (a, b) => a + b
14 |
--------------------------------------------------------------------------------
/test-apps/use-webpack/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": ["istanbul"]
3 | }
4 |
--------------------------------------------------------------------------------
/test-apps/use-webpack/README.md:
--------------------------------------------------------------------------------
1 | # use-webpack
2 |
3 | > Instruments the built bundle using Webpack
4 |
5 | Webpack uses [webpack.config.js](webpack.config.js) to build the bundle from [src/index.js](src/index.js) into `dist/main.js`, loaded from [dist/index.html](dist/index.html). The [cypress/integration/spec.js](cypress/integration/spec.js) also uses one of the functions from [src/calc.js](src/calc.js) directly. The final coverage includes both E2E and unit test coverage information.
6 |
7 | **Note:** this project requires `npm run build` before running `npm run dev`.
8 |
--------------------------------------------------------------------------------
/test-apps/use-webpack/cypress.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('cypress')
2 |
3 | module.exports = defineConfig({
4 | fixturesFolder: false,
5 | viewportHeight: 400,
6 | viewportWidth: 400,
7 | e2e: {
8 | setupNodeEvents(on, config) {
9 | return require('./cypress/plugins/index.js')(on, config)
10 | },
11 | baseUrl: 'http://localhost:1234',
12 | env: {
13 | codeCoverage: {
14 | exclude: ['cypress/**/*.*']
15 | }
16 | }
17 | },
18 | })
19 |
--------------------------------------------------------------------------------
/test-apps/use-webpack/cypress/e2e/spec.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 | import { add } from '../../src/calc'
3 |
4 | describe('Webpack example', () => {
5 | it('loads', () => {
6 | cy.visit('/')
7 | cy.contains('Webpack page').should('be.visible')
8 | cy.get('#user-input').type('Hello{enter}')
9 | cy.contains('olleH').should('be.visible')
10 | })
11 |
12 | it('has add function', () => {
13 | // test "add" via this unit test
14 | expect(add(2, 3)).to.equal(5)
15 | })
16 | })
17 |
--------------------------------------------------------------------------------
/test-apps/use-webpack/cypress/plugins/index.js:
--------------------------------------------------------------------------------
1 | ///
2 | const webpack = require('@cypress/webpack-preprocessor')
3 |
4 | /**
5 | * @type {Cypress.PluginConfig}
6 | */
7 | module.exports = (on, config) => {
8 | const options = {
9 | // use the same Webpack options to bundle spec files as your app does "normally"
10 | // which should instrument the spec files in this project
11 | webpackOptions: require('../../webpack.config'),
12 | watchOptions: {}
13 | }
14 | on('file:preprocessor', webpack(options))
15 |
16 | require('@cypress/code-coverage/task')(on, config)
17 | return config
18 | }
19 |
--------------------------------------------------------------------------------
/test-apps/use-webpack/cypress/support/e2e.js:
--------------------------------------------------------------------------------
1 |
2 | import '@cypress/code-coverage/support'
--------------------------------------------------------------------------------
/test-apps/use-webpack/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Webpack example
5 |
20 |
21 |
22 | Webpack page
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/test-apps/use-webpack/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example-use-webpack",
3 | "version": "1.0.0",
4 | "description": "Code coverage from webpack",
5 | "private": true,
6 | "scripts": {
7 | "cy:run": "cypress run",
8 | "build": "webpack && cp ./index.html ./dist/index.html",
9 | "start": "serve -p 1234 dist",
10 | "pretest": "rimraf .nyc_output .cache coverage dist",
11 | "test": "npm run build && start-test 1234 cy:run",
12 | "coverage:verify": "npx nyc report --check-coverage true --lines 100",
13 | "coverage:check-files": "check-coverage src/index.js && check-coverage src/calc.js && only-covered src/index.js src/calc.js"
14 | },
15 | "keywords": [],
16 | "author": "",
17 | "license": "ISC"
18 | }
19 |
--------------------------------------------------------------------------------
/test-apps/use-webpack/src/calc.js:
--------------------------------------------------------------------------------
1 | export const add = (a, b) => {
2 | return a + b
3 | }
4 |
5 | export const reverse = s => {
6 | return s
7 | .split('')
8 | .reverse()
9 | .join('')
10 | }
11 |
--------------------------------------------------------------------------------
/test-apps/use-webpack/src/index.js:
--------------------------------------------------------------------------------
1 | import { reverse } from './calc'
2 |
3 | if (window.Cypress) {
4 | require('console-log-div')
5 | console.log('attaching event listeners')
6 | }
7 |
8 | document.getElementById('user-input').addEventListener('change', e => {
9 | const s = e.target.value
10 | console.log(`input string "${s}"`)
11 | const reversed = reverse(s)
12 | document.getElementById('reversed').innerText = reversed
13 | })
14 | console.log('added event listener')
15 |
--------------------------------------------------------------------------------
/test-apps/use-webpack/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 |
3 | // https://webpack.js.org/guides/development/
4 | module.exports = {
5 | entry: './src/index.js',
6 | mode: 'development',
7 | devtool: 'inline-source-map',
8 | output: {
9 | filename: 'main.js',
10 | path: path.resolve(__dirname, 'dist')
11 | },
12 | module: {
13 | rules: [
14 | {
15 | // when bundling application's own source code
16 | // transpile using Babel which uses .babelrc file
17 | // and instruments code using babel-plugin-istanbul
18 | test: /\.js/,
19 | exclude: /(node_modules|bower_components)/,
20 | use: [
21 | {
22 | loader: 'babel-loader'
23 | }
24 | ]
25 | }
26 | ]
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/use-babelrc.js:
--------------------------------------------------------------------------------
1 | const webpackPreprocessor = require('@cypress/webpack-preprocessor')
2 | const defaults = webpackPreprocessor.defaultOptions
3 | // remove presets so the babelrc file will be used
4 | delete defaults.webpackOptions.module.rules[0].use[0].options.presets
5 | module.exports = webpackPreprocessor(defaults)
6 |
--------------------------------------------------------------------------------