Can't run Cypress with TS on ejected CRA app

sneas commented 4 years ago

Operating System: macOS Catalina
Cypress Version: 4.10.0
Browser Version: The latest Chrome

Is this a Feature or Bug?

A bug.

Current behavior:

First of all, thank you for cypress-webpack-preprocessor 👍!

You can find the non-working example of ejected react app with typescript, cypress, and cypress-webpack-preprocessor at the testing repo: https://github.com/sneas/cra-typescript-eject-cypress

Running cy:open throws Error: The NODE_ENV environment variable is required but was not specified.. Running cy:open-dev throws

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration should be an object.

Desired behavior:

Cypress runs tests without throwing errors.

How to reproduce:

git clone git@github.com:sneas/cra-typescript-eject-cypress.git
cd cra-typescript-eject-cypress
npm install
npm run cy:open
# or
pm run cy:open-dev

Additional Info (images, stack traces, etc)

toddpi314 commented 4 years ago

This just caused by CRA exporting a function while the preprocessor is expecting a JSON payload for the config. You can work around locally by seeding a local webpack.config.js from your plugins folder into the constructor webpackOptions, and within do something like:

const webpackConfig = require('../cra-location/webpack.config')
module.exports = webpackConfig('development')

sneas commented 4 years ago

Hi @toddpi314, thank you for taking the time to check out my repo and respond.

I've just tried to do what you suggested and move one step forward. Now my plugins/index.js looks like this: https://github.com/sneas/cra-typescript-eject-cypress/blob/master/cypress/plugins/index.js

Unfortunately, when I run Cypress with npm run cy:open command and click on some.spec.ts, I receive a message

No tests found in your file:
cypress/integration/some.spec.ts

But apparently there are some tests: https://github.com/sneas/cra-typescript-eject-cypress/blob/master/cypress/integration/some.spec.ts

Apparently I'm doing something wrong, but I can't see what exactly... Could you help me with that?

toddpi314 commented 4 years ago

This is probably caused by the contents of your webpack configurations.

You should check out the find-webpack project. It includes some utilities to automatically remove options in the base webpack config that aren't compatible with Cypress.

const findWebpack = require('find-webpack')
const webpackConfig = findWebpack.tryLoadingWebpackConfig(
    'path-to-original-config/webpack.config',
  )
  const cleanOptions = {
    reactScripts: true,
    coverage: true,
  }
  findWebpack.cleanForCypress(cleanOptions, webpackConfig)
 const webpackOptions = {
    webpackOptions: webpackConfig,
    watchOptions: {},
  }
on('file:preprocessor', webpackPreprocessor(webpackOptions))

The find-webpack will also operate on your original webpack config, so no need for the shim module.

sneas commented 4 years ago

It helped. Thanks a lot, @toddpi314 ! I've also updated https://github.com/sneas/cra-typescript-eject-cypress with the correct configuration.

cypress-io / cypress-webpack-preprocessor