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

Question

I want to test our React components independently using the package cypress-react-unit-test . After several days, I have been unable to get it to work with the existing React Webpack configuration. I get the error: TypeError: path argument is required to res.sendFile when I open the file through Cypress' window.

I am using the file from their example repo for testing: https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/unit-testing__react/greeting.jsx

We do use TypeScript, but I wanted to get this working first.

I have tried overwriting path as it is defaulting to undefined , but I'm getting the same error.

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

In my cypress/plugins/index.js file I have:

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));
};

I'm obviously missing something, but I don't know Webpack well enough. I would be grateful for any pointers! Thanks!

Answer 1

I had same issue as well, this is how my issue was resolved.

Paste the following code in your plugins/index.js file

 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 }

Add the following in your cypress.json file

 "componentFolder": "cypress/component"

Add this import in your support/index.js file

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

Create a folder under the Cypress folder with the name of "components" and write place your test files there. Now run 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
}