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

Question

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

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

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

我尝试覆盖默认为undefined的path，但我得到了相同的错误。

{
  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还不是很了解。如果有任何建议，我将不胜感激！谢谢!

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
}

​

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

​

"componentFolder": "cypress/component"

​

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

​

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

​

在Cypress文件夹下创建一个名为"components“的文件夹，并将测试文件放在那里。现在运行Cypress。

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
}