如何设置赛普拉斯进行单元测试？

Question

我正在将赛普拉斯作为测试框架。但是，我在遵循基本设置来测试一些应用程序代码（例如某些实用程序功能）时遇到麻烦。我点击了此处的链接https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/unit-testing__application-code

这是我要测试的给定代码（摘自示例）。

src / lib / math：

export default {
  add: (a, b) => {
    return a + b
  },

  subtract: (a, b) => {
    return a - b
  },

  divide: (a, b) => {
    return a / b
  },

  multiply: (a, b) => {
    return a * b
  }
}

这是我的测试： cypress / integration / unit.spec.js：

import {add} from '../../src/lib/math';  <---I'd like to use aliases!

context('math.js', function() {
  if('can add numbers', function() {
    expect(add(1,2)).to.eq(3)
  })
})

但是当我运行它时，出现此错误：

 Oops...we found an error preparing this test file:
/home/terry/myProjects/tester/cypress/integration/unit.spec.js
This occurred while Cypress was compiling and bundling your test code. This is usually caused by:

A missing file or dependency
A syntax error in the file or one of its dependencies
Fix the error in your code and re-run your tests.

似乎不像示例中那样导入文件。我错过了什么设置步骤？我正在使用webpack。

还可以在集成测试中使用webpack的模块解析别名功能吗？要避免使用“ ../../../”等？

编辑：为完整起见，这是我的babel，webpack和package.json设置：

.babelrc

{
      "presets": [
         "@babel/preset-react",
         "@babel/preset-env"
      ],
      "plugins": [
        "@babel/plugin-proposal-object-rest-spread",
        "babel-plugin-webpack-alias"
      ]
    }

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './src/index.html',
  filename: 'index.html',
  inject: 'body'
})

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'app.bundle.js'
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  },
  module: {
   rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader"
          }
        },
        {
          test: /\.html$/,
          use: [
            {
              loader: "html-loader",
              options: { minimize: true }
            }
          ]
        },

        {
          test: /\.(scss|sass|css)$/,
          use: [
              MiniCssExtractPlugin.loader,
              { loader: 'css-loader' },
              { loader: 'postcss-loader',
                  options: {
                    plugins: () => [autoprefixer({ grid: false})]
                  }
              },
              {
                loader: 'fast-sass-loader',
                options: {
                  includePaths: [  path.resolve(__dirname, 'src'), path.resolve(__dirname, 'src','styles') ,'./node_modules', '/node_modules/materialize-css/sass/components'],
                  sourceMap: true
                }
              }
          ]

        },
        {
          test: /\.(jpg|png)$/,
          loader: 'url-loader',
          options: {
            limit: 8192 // inline base64 URLs for <=8k images, direct URLs for the rest
          },
        },
        {    
          test: /\.svg/,
          use: {
            loader: 'svg-url-loader',
            options: {}
          }
        },
         {
            test: /\.mp3$/,
            loader: 'file-loader'
        },

      ]
  },
  resolve: {
    alias: {
      components: path.resolve(__dirname, 'src', 'components'),
      routes: path.resolve(__dirname, 'src', 'routes'),
      styles: path.resolve(__dirname, 'src', 'styles'),
      lib: path.resolve(__dirname, 'src', 'lib')
    },
  },
  devtool: 'source-map',
  plugins: [HtmlWebpackPluginConfig]
 }

package.json

{
  "name": "react-cypress-boilerplate",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch --mode development --port 8080",
    "dev": "webpack-dev-server --open",
    "test": "cypress open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.18.0",
    "concurrently": "^4.1.0",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-router-dom": "^5.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "@babel/preset-react": "^7.0.0",
    "@cypress/webpack-preprocessor": "^4.0.3",
    "autoprefixer": "^9.5.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-webpack-alias": "^2.1.2",
    "css-loader": "^2.1.1",
    "cypress": "^3.2.0",
    "fast-sass-loader": "^1.4.7",
    "file-loader": "^3.0.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "postcss-loader": "^3.0.0",
    "style-loader": "^0.23.1",
    "svg-url-loader": "^2.3.2",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  }
}

编辑：这是下面赛普拉斯的插件文件。无论有没有，我都尝试过。

plugins / index.js

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

module.exports = (on, config) => {
  const options = {
    // send in the options from your webpack.config.js, so it works the same
    // as your app's code
    webpackOptions: require('../../webpack.config'),
    watchOptions: {},
  }
// `config` is the resolved Cypress config

  on('file:preprocessor', webpack(options));

}