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

Question

我想使用包独立测试我们的React组件。但是经过几天的尝试，我无法让它与现有的React Webpack配置一起工作。当我通过Cypress的窗口打开文件时，会出现错误：TypeError：需要路径参数来res.sendFile。

我正在使用他们用于测试的示例存储库中的文件： 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不够熟悉。我会非常感谢任何指点！谢谢！

- Aaron

---

Cypress和react-scripts的版本是什么？ - kuceb

最新版是昨天刚刚安装的。具体来说： react-scripts = 2.1.8 cypress = 3.2.0 - Aaron

如果可能，请附上您现有的React Webpack配置。 - Alex

你最终解决了这个问题吗？我在不同的设置下遇到了相同的错误。 - Steven Vachon

很遗憾我没有这样做。我采用了不同的方法，将组件加载到Storybook中，然后使用Cypress针对Storybook的URL进行测试。结果证明这是一个双赢的局面，因为Storybook是一个非常好的工具。 - Aaron

Answer 1

我也遇到了同样的问题，以下是解决方法。

将以下代码粘贴到您的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
}

在你的文件中添加以下内容。

"componentFolder": "cypress/component"

在您的support/index.js文件中添加此导入。

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

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

- Khateeb321

---

你能帮忙吗？关于Cypress和Cucumber如何在Next.js中重置请求的问题。 - Asking

Answer 2

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
}

- Tommy