add TSX component example

Author: bahmutov

babel.config.js

@@ -1,5 +1,9 @@
 module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-react'],
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ],
   plugins: [
     // allow lazy loaded components with dynamic "import(...)"
     // https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import/

cypress.json

@@ -3,7 +3,7 @@
   "viewportHeight": 400,
   "video": false,
   "projectId": "z9dxah",
-  "testFiles": "**/*spec.js",
+  "testFiles": "**/*spec.{js,jsx,ts,tsx}",
   "env": {
     "cypress-react-unit-test": {
       "react": "node_modules/react/umd/react.development.js",

cypress/component/component tests/basic/typescript/ts-spec.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+
+const Button = ({ children, ...rest }) => {
+  return <button {...rest}>{children}</button>
+}
+
+describe('Component spec in typescript', () => {
+  it('works', () => {
+    mount(<Button>Button Label</Button>)
+    cy.contains('button', 'Button Label').should('be.visible')
+  })
+})

cypress/integration/ts-spec.ts

@@ -0,0 +1,7 @@
+describe('Cypress TypeScript', () => {
+  it('works', () => {
+    cy.wrap({ life: 42 })
+      .its('life')
+      .should('equal', 42)
+  })
+})

cypress/plugins/index.js

@@ -13,7 +13,7 @@ const webpackOptions = {
   module: {
     rules: [
       {
-        test: /\.(js|jsx|mjs)$/,
+        test: /\.(js|jsx|mjs|ts|tsx)$/,
         loader: 'babel-loader',
         options: babelConfig,
       },

cypress/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["./**/*.ts"],
+  "compilerOptions": {
+    "baseUrl": "../node_modules",
+    "types": ["cypress"]
+  }
+}

package-lock.json

@@ -50,6 +50,7 @@
     "@babel/plugin-transform-modules-commonjs": "7.7.5",
     "@babel/preset-env": "7.4.5",
     "@babel/preset-react": "7.0.0",
+    "@babel/preset-typescript": "7.9.0",
     "@emotion/core": "10.0.22",
     "@material-ui/core": "4.9.5",
     "@material-ui/icons": "4.5.1",

package.json

@@ -8,24 +8,24 @@ const config = {
   entry: APP_DIR + '/index.jsx',
   output: {
     path: BUILD_DIR,
-    filename: 'bundle.js'
+    filename: 'bundle.js',
   },
   module: {
     rules: [
       {
-        test: /\.(js|jsx|mjs)$/,
+        test: /\.(js|jsx|mjs|ts|tsx)$/,
         loader: 'babel-loader',
         include: APP_DIR,
-        options: babelConfig
+        options: babelConfig,
       },
       {
         test: /\.css$/,
         exclude: [/node_modules/],
         include: APP_DIR,
-        use: ['style-loader', 'css-loader']
-      }
-    ]
-  }
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
+  },
 }
 
 module.exports = config