fix(npm/react): support transpiling typescript files in support (#16197)

* fix: transpile typescript in supportFolder for react-scripts

* lint

* lint

* lint

* lint

* update package.json deps

* Remove yarn lock

* inject dev serverg

* add circleci reporter

Co-authored-by: Barthélémy Ledoux <bart@cypress.io>

npm/react/examples.env

@@ -2,9 +2,10 @@
 /examples/nextjs
 # /examples/nextjs-webpack-5
 /examples/react-scripts
+/examples/react-scripts-typescript
 /examples/webpack-file
 /examples/react-scripts-folder
 /examples/using-babel-typescript
 /examples/webpack-options
 # /examples/rollup
-/examples/sass-and-ts
+/examples/sass-and-ts

npm/react/examples/react-scripts-typescript/cypress.json

@@ -0,0 +1,7 @@
+{
+  "video": false,
+  "testFiles": "**/*cy-spec.tsx",
+  "viewportWidth": 500,
+  "viewportHeight": 800,
+  "componentFolder": "src"
+}

npm/react/examples/react-scripts-typescript/cypress/integration/cy-spec.js

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

npm/react/examples/react-scripts-typescript/cypress/plugins/index.js

@@ -0,0 +1,7 @@
+const injectDevServer = require('@cypress/react/plugins/react-scripts')
+
+module.exports = (on, config) => {
+  injectDevServer(on, config)
+
+  return config
+}

npm/react/examples/react-scripts-typescript/cypress/support/index.d.ts

@@ -0,0 +1,9 @@
+declare namespace Cypress {
+  interface Chainable {
+    /**
+     * Custom command to select DOM element by data-cy attribute.
+     * @example cy.dataCy('greeting')
+     */
+    clickButtonWithText(value: string): Chainable
+  }
+}

npm/react/examples/react-scripts-typescript/cypress/support/index.ts

@@ -0,0 +1,5 @@
+/// <reference types="cypress" />
+
+Cypress.Commands.add('clickButtonWithText', (value: string) => {
+  return cy.get('button').contains(value).click()
+})

npm/react/examples/react-scripts-typescript/package.json

@@ -0,0 +1,18 @@
+{
+  "private": true,
+  "scripts": {
+    "cy:open": "node ../../../../scripts/cypress open-ct",
+    "start": "react-scripts start",
+    "test": "node ../../../../scripts/cypress run-ct"
+  },
+  "devDependencies": {
+    "@cypress/react": "file:../../dist",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "cypress-circleci-reporter": "0.2.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-scripts": "4.0.3",
+    "typescript": "^4.2.3"
+  }
+}

npm/react/examples/react-scripts-typescript/src/App.cy-spec.tsx

@@ -0,0 +1,16 @@
+/// <reference path="../cypress/support/index.d.ts" />
+
+import React from 'react'
+import { mount } from '@cypress/react'
+
+it('works', () => {
+  const click = cy.stub()
+  const App = () => {
+    return (<button onClick={click}>Button!</button>)
+  }
+
+  mount(<App />)
+  cy.clickButtonWithText('Button!').then(() => {
+    expect(click).to.have.been.calledWith()
+  })
+})

npm/react/examples/react-scripts-typescript/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "types": [
+      "cypress"
+    ]
+  },
+  "include": [
+    "src"
+  ]
+}

npm/react/plugins/utils/get-transpile-folders.js

@@ -11,6 +11,10 @@ function getTranspileFolders (config) {
     folders.push(config.fixturesFolder)
   }
 
+  if (config.supportFolder) {
+    folders.push(config.supportFolder)
+  }
+
   return folders
 }