Component test runner not understanding typescript.

[geoguide]

I'm getting this error:

../core/src/shared/util/test.ts 10:0
Module parse failed: The keyword 'interface' is reserved (10:0)

I was getting also similar errors in my commands file with:

declare global {
  // eslint-disable-next-line @typescript-eslint/no-namespace
  namespace Cypress {
    interface Chainable {
      internalLogin: typeof internalLogin,
    }
  }
}

I've been trying a bunch of stuff to try to get just a basic test running in our system. We currently use cypress with typescript for integration tests.

Also this is a create-react-app based application.

I added this to the plugins/index.ts:

  if (config.testingType === 'component') {
    require('@cypress/react/plugins/react-scripts')(on, config)
  }

and this to cypress.json:

  "component": {
    "componentFolder": "src",
    "testFiles": "**/*spec.{js,jsx,ts,tsx}",
    "viewportHeight": 500,
    "viewportWidth": 700
  }

Did I miss a step?

edit: I've put a bunch more time into figure this out and I don't get hat could be wrong.

[Develliot]

I got it working

plugin index :

const preprocessor = require('@cypress/webpack-preprocessor');
const options = { webpackOptions: require('../../webpack.config.test.js') };

module.exports = (on, config) => {
  
  if (config.testingType === 'component') {
    const { startDevServer } = require('@cypress/webpack-dev-server')
    
    // Your project's Webpack configuration
    const webpackConfig = require('../../webpack.config.test.js')
    
    on('file:preprocessor', preprocessor(options));
    on('dev-server:start', (options) =>
      startDevServer({ options, webpackConfig })
    )
  }

  return config;
};

my webpack config for the tests

var path = require('path');
const createWebpackConfig = require('./webpack.common').createWebpackConfig;

module.exports = createWebpackConfig({
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
            },
          },
        ],
      },
      {
        test: /\.md?$/,
        use: ['babel-loader', '@mdx-js/loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  devtool: false,
  devServer: {
    host: '0.0.0.0',
    contentBase: path.resolve(__dirname, './src'),
    watchContentBase: true,
    port: 8080,
  },
});

tsconfig

{
  "compilerOptions": {
    "strict": true,
    "declaration": true,
    "declarationDir": "./lib",
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "lib": [
      "dom",
      "es2015",
      "es2016"
    ],
    "jsx": "react",
    "target": "es5",
    "module": "es6",
    "baseUrl": "./",
    "allowJs": false, //Only TS and TSX will be compiled.
    "noImplicitAny": true, // Setting to true means if no type given it will not automatically assign ANY.
    "noUnusedLocals": true,
    "allowSyntheticDefaultImports": true, // This is needed for the React components.
    "noErrorTruncation": true,
    "skipLibCheck": true,
  }
}

babel.config.js

module.exports = function(api) {
  var isDev = api.env('development');

  return {
    sourceMaps: true,
    presets: [
      [
        '@babel/preset-env',
        {
          targets: {
            esmodules: true,
          },
        },
      ],
      '@babel/preset-react',
      '@babel/preset-typescript',
    ],
    plugins: [
      '@babel/plugin-proposal-class-properties',
      [
        'styled-components',
        {
          ssr: true,
          displayName: isDev,
          preprocess: false,
          pure: true,
        },
      ],
    ],
  };
};

hope that helps

[lmiller1990]

Hey. Sorry for the slow reply. I'll be checking discussions on a daily basis from now on. Can you share your project structure? Where is ../core/src/shared/util/test.ts? I recently merged a PR that supports TS files in cypress/support - could be related.

Other than that, if you can provide a minimal reproduction, I can take a look. There is a solution above but I think it's probably not ideal - you should no longer need file:preprocessor.

Will need more info on your project, how you set things up (CRA? Custom webpack config)? etc. Thanks!

[geoguide]

Core is outside of my application, it's symlinked to another folder

core/src/shared
app/src/
  shared -> ../../core/src/shared

We use CRA, we have rewired also.

[lmiller1990]

I looked into this... it's a well known and intentional limitation of the CRA webpack. See this issue for example. Here's the exact line and a comment in the actual CRA source.

I am not really sure on the best way to solve this. I see several options:

1. modify the CRA config on the fly to support additional folders. We already do this for Cypress folders. But how do know which folders you will use?
2. do nothing - this is not really something Cypress should be solving (except for code in cypress directory). This is a "feature" of CRA.
3. offer an option to pass additional paths? Perhaps

startDevServer({
  webpackConfig,
  options,
  additonalPaths: [/*...*/]
})

I don't know if it's a great idea for us to be working around the intentional limitations of CRA - but I also want to make Cypress and CRA as seamless to use as possible.