配置 Cypress、cypress-react-unit-test 和 React答案

【问题标题】：Configuring Cypress, cypress-react-unit-test, and React配置 Cypress、cypress-react-unit-test 和 React
【发布时间】：2019-09-08 02:23:19
【问题描述】：

我想使用 cypress-react-unit-test 包独立测试我们的 React 组件。几天后，我无法让它与现有的 React Webpack 配置一起工作。当我通过赛普拉斯的窗口打开文件时，出现错误：TypeError: path argument is required to res.sendFile。

我正在使用他们的示例 repo 中的文件进行测试： https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/unit-testing__react/greeting.jsx

我们确实使用 TypeScript，但我想先让它工作。

我已尝试覆盖 path，因为它默认为 undefined，但我遇到了同样的错误。

{
  options: {
    path: "/my/home/dir/"
  }
}

在我的cypress/plugins/index.js 文件中，我有：

const wp = require("@cypress/webpack-preprocessor");

const webpackConfig = require("../../node_modules/react-scripts/config/webpack.config")("development");

module.exports = on => {
  const options = {
    webpackOptions: webpackConfig
  };

  on("file:preprocessor", wp(options));
};

我显然遗漏了一些东西，但我对 Webpack 的了解不够。我将不胜感激任何指示！谢谢！

【问题讨论】：

什么版本的 cypress 和 react-scripts？
我昨天刚安装的最新版本。具体来说：react-scripts = 2.1.8 cypress = 3.2.0
如果可能，请附上您现有的 React Webpack 配置
你最终解决了这个问题吗？我在使用不同的设置时遇到了同样的错误。
不幸的是我没有。我采用了不同的方法，将组件加载到 Storybook 中，然后使用 Cypress 对 Storybook 的 URL 进行测试。事实证明这是双赢的，因为 Storybook 是一个很棒的工具。

标签： reactjs webpack webpack-4 cypress

【解决方案1】：

module.exports = (on, config) => {
   config.env.webpackFilename = 'path/to/your/webpack.config.js';

   // load-webpack is the main key here
   require('cypress-react-unit-test/plugins/load-webpack')(on, config);

   // IMPORTANT to return the config object
   // with the any changed environment variables
   return config
}

【讨论】：

【解决方案2】：

我也遇到了同样的问题，我的问题就是这样解决的。

将以下代码粘贴到您的 plugins/index.js 文件中

module.exports = (on, config) => {
    config.env.webpackFilename = './cypress/webpack.config.js' // or path to your webpack.config.js
    require('cypress-react-unit-test/plugins/load-webpack')(on, config)
    return config
}

在您的 cypress.json 文件中添加以下内容

"componentFolder": "cypress/component"

将此导入添加到您的 support/index.js 文件中

import 'cypress-react-unit-test/support'

在 Cypress 文件夹下创建一个名为“components”的文件夹，并在其中写入您的测试文件。现在运行 Cypress。

【讨论】：