Update cypress.md

Author: basarat

docs/testing/cypress.md

@@ -2,7 +2,7 @@
 Cypress is a great E2E testing tool. Here are a few great reasons to consider it:
 
 * Isolated installation possible.
-* Ships with TypeScript definitions out of the box.
+* Ships with TypeScript support out of the box.
 * Provides a nice interactive google chrome debug experience. This is very similar to how UI devs mostly work manually.
 * Has command - execution separation which allows for more powerful debugging and test stability (more on this below).
 * Has implicit assertions to provide more meaningful debug experience with less brittle tests (more on this in the tips below).
@@ -20,74 +20,36 @@ Create an e2e directory and install cypress and its dependencies for TypeScript
 mkdir e2e
 cd e2e
 npm init -y
-npm install cypress webpack @cypress/webpack-preprocessor typescript ts-loader
+npm install cypress typescript
+npx tsc --init --types cypress --lib dom,es6
+echo {} > cypress.json 
 ```
 
 > Here are a few reasons for creating a separate `e2e` folder especially for cypress:
 * Creating a separate directory or `e2e` makes it easier to isolate its `package.json` dependencies from the rest of your project. This results in less dependency conflicts.
 * Testing frameworks have a habit of polluting the global namespace with stuff like `describe` `it` `expect`. It is best to keep the e2e `tsconfig.json` and `node_modules` in this special `e2e` folder to prevent global type definition conflicts.
 
-Setup TypeScript `tsconfig.json` e.g.
+Add a few scripts to the `e2e/package.json` file:
 
 ```json
-{
-  "compilerOptions": {
-    "strict": true,
-    "sourceMap": true,
-    "module": "commonjs",
-    "target": "es5",
-    "lib": [
-      "dom",
-      "es6"
-    ],
-    "types": ["cypress"],
-    "jsx": "react",
-    "experimentalDecorators": true
+  "scripts": {
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run"
   },
-  "compileOnSave": false
-}
 ```
 
-Do a first dry run of cypress to prime the cypress folder structure. The Cypress IDE will open. You can close it after you see the welcome message.
+Write your first test under `cypress/integration/basic.ts`: 
 
-```sh
-npx cypress open
-```
-
-Setup cypress for transpiling typescript by editing `e2e/cypress/plugins/index.js` to match the following:
-
-```js
-const wp = require('@cypress/webpack-preprocessor')
-module.exports = (on) => {
-  const options = {
-    webpackOptions: {
-      resolve: {
-        extensions: [".ts", ".tsx", ".js"]
-      },
-      module: {
-        rules: [
-          {
-            test: /\.tsx?$/,
-            loader: "ts-loader",
-            options: { transpileOnly: true }
-          }
-        ]
-      }
-    },
-  }
-  on('file:preprocessor', wp(options))
-}
+```ts
+it('should perform basic google search', () => {
+  cy.visit('https://google.com');
+  cy.get('[name="q"]')
+    .type('subscribe')
+    .type('{enter}');
+});
 ```
 
-
-Optionally add a few scripts to the `e2e/package.json` file:
-
-```json
-  "scripts": {
-    "cypress:open": "cypress open",
-    "cypress:run": "cypress run"
-  },
-```
+Now run `npm run cypress:open` during development and `npm run cypress:run` on your build server 🌹
 
 ## More description of key Files
 Under the `e2e` folder you now have these files: