Need Example with React components written in Typescript

[cypress-io]

Need Example with React components written in Typescript

[nealeu]

Unit tests would certainly be useful. Some Cypress and Typescript support is included in NX: https://blog.nrwl.io/powering-up-react-development-with-nx-cf0a9385dbec

[bahmutov]

Added example in https://github.com/bahmutov/try-cra-app-typescript

[HDv2b]

I'm also really looking forward to this. I've been running around in circles the last 3 days trying to get this figured out.

As soon as I add '.ts' and '.tsx' to resolve.extensions everything falls apart even if I only have specs to components written in pure .jsx.

// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************
const path = require('path');
const webpack = require('@cypress/webpack-preprocessor');

const webpackOptions = {
  node: {
    fs: 'empty',
  },
  resolve: {
    extensions: [
      '.ts', // <-- works fine if commented out
      '.tsx', // <-- works fine if commented out
      '.js',
      '.jsx',
    ],
    modules: [
      'node_modules',
    ],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
          plugins: ['@babel/plugin-proposal-class-properties'],
        },
      },
      {
        test: /\.(ts|tsx)$/,
        loader: 'ts-loader',
        exclude: [
          /node_modules/,
        ],
      },
/*      {
        test: /\.(ts|tsx)$/,
        loader: require.resolve('babel-loader'),
        options: {
          presets: [
            '@babel/preset-env',
            '@babel/preset-react',
            ['react-app', { flow: false, typescript: true }]],
        },
      },*/
    ],
  },
};

const options = {
  // send in the options from your webpack.config.js, so it works the same
  // as your app's code
  webpackOptions,
  watchOptions: {},
};

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)

module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config
  on('file:preprocessor', webpack(options));
};

// greeting.spec.js

/// <reference types="cypress" />

import React from 'react';

import Greeting from '../../../client/ui-library/Greeting';

describe('cypress-react-unit-test', () => {
  it('shows greeting', () => {
    cy.mount(<Greeting />);
    cy.contains('Hello World');
  });

  it('changes greeting on click', () => {
    cy.mount(<Greeting />);
    cy.get('button').click();
    cy.contains('Bonjour World');
  });
});

// greeting.jsx (from some cypress.io example)
import React from 'react';

class Greeting extends React.Component {
  constructor(...args) {
    super(...args);

    this.state = {
      greeting: 'Hello',
    };
  }

  updateGreeting() {
    this.setState({
      greeting: 'Bonjour',
    });
  }

  render() {
    return (
      <div aria-label="greeting">
        <p>
          {this.state.greeting}
          {' '}
          World
        </p>
        <button onClick={this.updateGreeting.bind(this)}>
          Update greeting
        </button>
      </div>
    );
  }
}

export default Greeting;

[HDv2b]

@ETE-Jens-Ihrig I managed to put together a working example: https://github.com/ElGoorf/cypress-react-unit-test

[tam5]

I had trouble finding a working example for typescript, so i put together this https://github.com/tam5/tsx-cypress-example which has a test written in .tsx file and works.

Also, if you need hooks, check out the with-hooks branch, which has an example of the hack needed (as of time of writing) to get that to work too.

But, it still has the problem of losing event listeners after the first test. For that we’ll have to wait I guess