├── .gitignore ├── README.md ├── cypress.json ├── cypress ├── fixtures │ └── example.json ├── integration │ ├── All.features │ └── WebPack.feature ├── plugins │ └── index.js ├── support │ ├── commands.js │ ├── index.js │ └── step_definitions │ │ ├── myAssertion.ts │ │ └── webpack.ts └── webpack.config.js ├── package-lock.json ├── package.json └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | .idea/ 3 | 4 | # dependencies 5 | /node_modules 6 | /.pnp 7 | .pnp.js 8 | 9 | # testing 10 | /coverage 11 | 12 | # production 13 | /build 14 | 15 | # misc 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | 26 | cypress/videos/ 27 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # cypress-cucumber-webpack-typescript-example 2 | cypress cucumber webpack typescript example 3 | 4 | All the configuration is in [cypress/plugins/index.js](cypress/plugins/index.js) 5 | 6 | Typescript step definitions are in [cypress/support/step_definitions](cypress/support/step_definitions) 7 | 8 | Thanks [@mkusher](https://github.com/mkusher) for the [work](https://github.com/TheBrainFamily/cypress-cucumber-preprocessor/pull/115) on making cypress-cucumber-preprocessor work with webpack! 9 | 10 | You can also use our Cucumber plugin with TypeScript without webpack [https://github.com/TheBrainFamily/cypress-cucumber-typescript-example/](https://github.com/TheBrainFamily/cypress-cucumber-typescript-example/). 11 | -------------------------------------------------------------------------------- /cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "testFiles": "**/*.{feature,features}" 3 | } 4 | -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /cypress/integration/All.features: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TheBrainFamily/cypress-cucumber-webpack-typescript-example/ebcfd0f746fa2507cd61fb7b7bbe6fd866fe261e/cypress/integration/All.features -------------------------------------------------------------------------------- /cypress/integration/WebPack.feature: -------------------------------------------------------------------------------- 1 | Feature: Working with Webpack 2 | 3 | Scenario: it's alive! 4 | Given webpack is configured 5 | Then this test should work just fine! 6 | -------------------------------------------------------------------------------- /cypress/plugins/index.js: -------------------------------------------------------------------------------- 1 | const webpack = require("@cypress/webpack-preprocessor"); 2 | 3 | module.exports = on => { 4 | const options = { 5 | webpackOptions: require("../webpack.config.js") 6 | }; 7 | on("file:preprocessor", webpack(options)); 8 | }; 9 | -------------------------------------------------------------------------------- /cypress/support/commands.js: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add("login", (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This is will overwrite an existing command -- 25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) 26 | -------------------------------------------------------------------------------- /cypress/support/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import './commands' 18 | 19 | // Alternatively you can use CommonJS syntax: 20 | // require('./commands') 21 | -------------------------------------------------------------------------------- /cypress/support/step_definitions/myAssertion.ts: -------------------------------------------------------------------------------- 1 | import assert from "assert"; 2 | 3 | const myAssertion = (): uselessType => { 4 | assert(true); 5 | return { uselessKey: "" }; 6 | }; 7 | 8 | type uselessType = { 9 | uselessKey: String; 10 | }; 11 | 12 | export default myAssertion; 13 | -------------------------------------------------------------------------------- /cypress/support/step_definitions/webpack.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import myAssertion from "./myAssertion"; 4 | 5 | const { 6 | Given, 7 | Then 8 | } = require("cypress-cucumber-preprocessor/steps"); 9 | 10 | Given(`webpack is configured`, () => {}); 11 | 12 | Then(`this test should work just fine!`, () => { 13 | myAssertion(); 14 | cy.visit('https://google.com') 15 | }); 16 | -------------------------------------------------------------------------------- /cypress/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | resolve: { 3 | extensions: [".ts", ".js"] 4 | }, 5 | node: { fs: "empty", child_process: "empty", readline: "empty" }, 6 | module: { 7 | rules: [ 8 | { 9 | test: /\.ts$/, 10 | exclude: [/node_modules/], 11 | use: [ 12 | { 13 | loader: "ts-loader" 14 | } 15 | ] 16 | }, 17 | { 18 | test: /\.feature$/, 19 | use: [ 20 | { 21 | loader: "cypress-cucumber-preprocessor/loader" 22 | } 23 | ] 24 | }, 25 | { 26 | test: /\.features$/, 27 | use: [ 28 | { 29 | loader: "cypress-cucumber-preprocessor/lib/featuresLoader" 30 | } 31 | ] 32 | } 33 | ] 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cypress-cucumber-webpack-example", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@types/node": "^10.12.11" 7 | }, 8 | "scripts": { 9 | "test": "cypress run --spec \"**/*.feature\"", 10 | "test:all": "cypress run --spec \"**/*.features\"" 11 | }, 12 | "devDependencies": { 13 | "@cypress/webpack-preprocessor": "^4.0.2", 14 | "cypress": "^3.4.1", 15 | "cypress-cucumber-preprocessor": "latest", 16 | "ts-loader": "^5.3.1", 17 | "typescript": "^3.2.1", 18 | "webpack": "^4.28.2" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Basic Options */ 4 | "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */ 5 | "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ 6 | // "lib": [], /* Specify library files to be included in the compilation. */ 7 | // "allowJs": true, /* Allow javascript files to be compiled. */ 8 | // "checkJs": true, /* Report errors in .js files. */ 9 | // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 10 | // "declaration": true, /* Generates corresponding '.d.ts' file. */ 11 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 12 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 13 | // "outFile": "./", /* Concatenate and emit output to single file. */ 14 | // "outDir": "./", /* Redirect output structure to the directory. */ 15 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 16 | // "composite": true, /* Enable project compilation */ 17 | // "removeComments": true, /* Do not emit comments to output. */ 18 | // "noEmit": true, /* Do not emit outputs. */ 19 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 20 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 21 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 22 | 23 | /* Strict Type-Checking Options */ 24 | "strict": true, /* Enable all strict type-checking options. */ 25 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 26 | // "strictNullChecks": true, /* Enable strict null checks. */ 27 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 28 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ 29 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 30 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 31 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 32 | 33 | /* Additional Checks */ 34 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 35 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 36 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 37 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 38 | 39 | /* Module Resolution Options */ 40 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 41 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 42 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 43 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 44 | // "typeRoots": [], /* List of folders to include type definitions from. */ 45 | // "types": [], /* Type declaration files to be included in compilation. */ 46 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 47 | "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 48 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 49 | 50 | /* Source Map Options */ 51 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 52 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 53 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 54 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 55 | 56 | /* Experimental Options */ 57 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 58 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 59 | } 60 | } --------------------------------------------------------------------------------