Cypress for Components Tests React配置绝对路径问题

Question

目标主要是使用Cypress进行组件测试和e2e测试。正确安装和配置所有Cypress，在'cypress open'脚本中配置Cypress开启E2E相关测试，配置'cypress open-ct'脚本进行组件测试，所有设置都很好

问题

项目已经准备就绪，我有绝对文件夹配置，当我从“~/components”导入组件时，我正在访问 'src/components'，我无法进行正确的设置访问绝对文件夹，因为当我运行 cypress open script -ct 似乎没有运行 'file:preprocessor'，你需要运行它到运行您具有绝对文件夹设置的 webpack。我尝试了几种替代方法，这是效果最好的一种，因为当我运行时，'cypress open' 脚本 cypress 执行 'file:preprocessor' 它会应用 webpack 设置，如果我尝试使用 ' 导入组件~/component/InputDate' 它有效，但是 'cypress open' 用于 E2E 测试，我不能运行通过此脚本进行单元测试。
我可能对 cypress open 脚本没有正确运行ning 组件测试有误，但我正在寻找解决这些绝对文件夹这一大问题的方法。

尝试次数

我尝试了 tsconfig.json 文件配置解决方案，但我无法使其工作，因为我在 jsconfig.json 项目中使用它，我尝试使用 tsconfig.json 我使用 'tsconfig-paths'打包，没有结果。

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"
  }

Answer 1

我设法做了以下解决方案：

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'),
    },
  },
}

Cypress for Components Tests React配置绝对路径问题

Cypress for Components Tests React configuration problem absolute path

javascript

reactjs

webpack

cypress

cypress-component-test-runner

问题

尝试次数

cypress/plugins/index.js

cypress.json

webpackconfig.js

packjage.json

plugins/index.js

cypress.json

webpack.config.js