Cypress

Install

yarn add cypress --dev

Configuration

Typescript

Add cypress/tsconfig.json file

{
  "compilerOptions": {
    "strict": true,
    "baseUrl": "../node_modules",
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress"]
  },
  "include": ["**/*.ts"]
}

Configure Typescript Webpack Preprocessor

Installs yarn add @cypress/webpack-preprocessor webpack ts-loader --dev
- Verify yarn start still works. Create React App (CRA) requires a specific version of Webpack. If it fails, install the specific version (ex: 4.41.0) of webpack needed for CRA with yarn add [email protected] --dev

Create file cypress/plugins/cypress-typescript-preprocessor.js

/**
 * Typescript configuration for Cypress with Webpack
 * @source https://github.com/cypress-io/add-cypress-custom-command-in-typescript/blob/master/cypress/plugins/cy-ts-preprocessor.js
 */

const wp = require('@cypress/webpack-preprocessor');

const webpackOptions = {
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true
            }
          }
        ]
      }
    ]
  }
};

const options = {
  webpackOptions
};

module.exports = wp(options);

Add to file cypress/plugins/index.js

const cypressTypescriptPreprocessor = require('./cypress-typescript-preprocessor');

module.exports = (on, config) => {
  on('file:preprocessor', cypressTypescriptPreprocessor);
};

Test Execution

All tests reside in the cypress/integration folder.

Open Cypress GUI. Manually select/execute tests. Observe test execution in a browser.
- yarn run cypress open
Run tests headless in terminal.
- yarn run cypress run

kylewhitaker/cypress.md

Cypress

Install

Configuration

Test Execution

References