Cypress for Components Tests React configuration problem absolute path-CodePudding

the goal is to use Cypress for component testing and e2e testing mainly. Install and configure all Cypress correctly, configure Cypress in the 'cypress open' script to open E2E related tests and configure the 'cypress open-ct' script for component tests, all settings work very well.

Problem

The project is already ready and I have absolute folders configuration, when I import a component from '~/components' I am accessing 'src/components', I am not able to make the proper settings to be able to access the absolute folders because when I run the cypress open script -ct doesn't seem to run 'file:preprocessor', where you need to run it to run the webpack where you have the absolute folder settings. I tried several alternatives and this was the one that worked the best because when I run the 'cypress open' script cypress executes 'file:preprocessor' it applies the webpack settings and if I try to import a component using '~/component/InputDate' it works , however 'cypress open' is for E2E tests, I can't run unit tests through this script.
I can be wrong about the cypress open script not running component tests correctly but I'm looking for a solution to the big problem that is these absolute folders.

Attempts

I tried the tsconfig.json files configuration solution but I couldn't make it work because I use it in the jsconfig.json project, I tried to use tsconfig.json I used the 'tsconfig-paths' package and got no result.

cypress/plugins/index.js

const webpack = require('@cypress/webpack-preprocessor')

const injectDevServer = require('@cypress/react/plugins/react-scripts')

module.exports = (on, config) => {
  const options = {
    webpackOptions: require('../../webpack.config.js'),
    watchOptions: {},
  }
  on('file:preprocessor', webpack(options))

  injectDevServer(on, config)

  return config
}

cypress.json

{
  "component": {
    "componentFolder": "src/tests/components"
  },
  "integrationFolder": "src/tests/integration"
}

webpackconfig.js

var path = require('path')

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$|jsx/,
        exclude: [/node_modules/],
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react'],
            },
          },
        ],
      },
    ],
  },
  resolve: {
    alias: {
      '~': path.resolve(__dirname, 'src'),
    },
  },
}

packjage.json

"devDependencies": {
    "@cypress/react": "5.12.4",
    "@cypress/webpack-dev-server": "1.8.3",
    "@cypress/webpack-preprocessor": "^5.11.1",
    "@types/jwt-decode": "^3.1.0",
    "babel-loader": "^8.2.3",
    "cypress": "9.5.2",
    "webpack-dev-server": "3.2.1"
  }

CodePudding user response：

I managed to do the following solution:

plugins/index.js

const { startDevServer } = require('@cypress/webpack-dev-server')
const webpackConfig = require('../../webpack.config.js')

module.exports = (on, config) => {
  on('dev-server:start', async (options) =>
    startDevServer({ options, webpackConfig }),
  )
  return config
}

cypress.json

{
  "component": {
    "componentFolder": "src/tests/unity"
  },
  "integrationFolder": "src/tests/integration"
}

webpack.config.js

var path = require('path')

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$|jsx/,
        exclude: [/node_modules/],
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react'],
            },
          },
        ],
      },
    ],
  },
  resolve: {
    alias: {
      '~': path.resolve(__dirname, 'src'),
    },
  },
}