chore: Babel + Typescript example (#408)

* Add babel-typescipt example

* Run new example on CI

* chore: run markdown links checks only on main (#404)

* chore: Improve typings (#405)

* check out files before checking links

* just use normal cypress run job

* Improve Readme

Co-authored-by: Gleb Bahmutov <gleb.bahmutov@gmail.com>

Author: dmtrKovalenko

circle.yml

@@ -69,6 +69,19 @@ workflows:
           command: npm test
           store_artifacts: true
 
+      - cypress/run:
+          name: Example Babel + Typescript
+          requires:
+            - Install
+          executor: cypress/base-12
+          # each example installs "cypress-react-unit-test" as a local dependency (symlink)
+          install-command: npm install
+          verify-command: echo 'Already verified'
+          no-workspace: true
+          working_directory: examples/using-babel-typesceript
+          command: npm test
+          store_artifacts: true
+
       - cypress/run:
           name: Example React Scripts
           requires:

examples/using-babel-typescript/.npmrc

@@ -0,0 +1 @@
+package-lock=false

examples/using-babel-typescript/README.md

@@ -0,0 +1,74 @@
+# example: using-babel
+
+> Component testing for typescript projects using Babel config with `@babel/preset-typescript`
+
+![Example component test](images/dynamic.gif)
+
+## Usage
+
+1. Make sure the root project has been built .
+
+```bash
+# in the root of the project
+npm install
+npm run build
+```
+
+2. Run `npm install` in this folder to symlink the `cypress-react-unit-test` dependency.
+
+```bash
+# in this folder
+npm install
+```
+
+3. Start Cypress
+
+```bash
+npm run cy:open
+# or just run headless tests
+npm test
+```
+
+## Specs
+
+See spec files [src/\*.spec.js](src). The specs are bundled using [babel.config.js](babel.config.js) settings via [cypress/plugins/index.js](cypress/plugins/index.js) file that includes file preprocessor.
+
+```js
+// let's bundle spec files and the components they include using
+// the same bundling settings as the project by loading .babelrc
+const preprocessor = require('cypress-react-unit-test/plugins/babelrc')
+module.exports = (on, config) => {
+  preprocessor(on, config)
+  // IMPORTANT to return the config object
+  // with the any changed environment variables
+  return config
+}
+```
+
+## Mocking
+
+During test runs, there is a Babel plugin that transforms ES6 imports into plain objects that can be stubbed using [cy.stub](https://on.cypress.io/stub). In essence
+
+```ts
+// component imports named ES6 import from "calc.js
+import { getRandomNumber } from './calc'
+const Component = () => {
+  // then calls it
+  const n = getRandomNumber()
+  return <div className="random">{n}</div>
+}
+```
+
+The test can mock that import before mounting the component
+
+```js
+import Component from './Component'
+import * as calc from './calc'
+describe('Component', () => {
+  it('mocks call from the component', () => {
+    cy.stub(calc, 'getRandomNumber')
+      .returns(777)
+    mount(<Component />)
+  })
+})
+```

examples/using-babel-typescript/babel.config.js

@@ -0,0 +1,27 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-typescript',
+    '@babel/preset-react',
+  ],
+  plugins: ['@babel/plugin-proposal-class-properties'],
+  env: {
+    // place plugins for Cypress tests into "test" environment
+    // so that production bundle is not instrumented
+    test: {
+      plugins: [
+        // during Cypress tests we want to instrument source code
+        // to get code coverage from tests
+        'babel-plugin-istanbul',
+        // we also want to export ES6 modules as objects
+        // to allow mocking named imports
+        [
+          '@babel/plugin-transform-modules-commonjs',
+          {
+            loose: true,
+          },
+        ],
+      ],
+    },
+  },
+}

examples/using-babel-typescript/cypress.json

@@ -0,0 +1,8 @@
+{
+  "fixturesFolder": false,
+  "testFiles": "**/*spec.tsx",
+  "viewportWidth": 500,
+  "viewportHeight": 500,
+  "experimentalComponentTesting": true,
+  "componentFolder": "src"
+}

examples/using-babel-typescript/cypress/integration/spec.js

@@ -0,0 +1,6 @@
+/// <reference types="cypress" />
+describe('integration spec', () => {
+  it('works', () => {
+    expect(1).to.equal(1)
+  })
+})

examples/using-babel-typescript/cypress/plugins/index.js

@@ -0,0 +1,10 @@
+// let's bundle spec files and the components they include using
+// the same bundling settings as the project by loading .babelrc
+// https://github.com/bahmutov/cypress-react-unit-test#install
+const preprocessor = require('cypress-react-unit-test/plugins/babelrc')
+module.exports = (on, config) => {
+  preprocessor(on, config)
+  // IMPORTANT to return the config object
+  // with the any changed environment variables
+  return config
+}

examples/using-babel-typescript/cypress/support/index.js

@@ -0,0 +1 @@
+require('cypress-react-unit-test/dist/hooks')

examples/using-babel-typescript/images/dynamic.gif

@@ -0,0 +1,12 @@
+{
+  "name": "example-using-babel",
+  "description": "Component testing for projects using Babel config",
+  "private": true,
+  "scripts": {
+    "test": "node ../../scripts/cypress-expect run --passing 17",
+    "cy:open": "../../node_modules/.bin/cypress open"
+  },
+  "devDependencies": {
+    "cypress-react-unit-test": "file:../.."
+  }
+}