17

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!

Aaron
  • 343
  • 1
  • 8
  • 1
    What versions of cypress and react-scripts? – kuceb Apr 17 '19 at 19:24
  • The latest as I just installed it yesterday. To be specific though: react-scripts = 2.1.8 cypress = 3.2.0 – Aaron Apr 18 '19 at 17:27
  • if it's possible please attach your existing React Webpack configuration – Alex Jan 15 '20 at 02:28
  • Did you end up solving this? I'm experiencing the same error with a different setup. – Steven Vachon Mar 09 '20 at 17:13
  • I didn't unfortunately. I took a different approach and have the component loaded in Storybook, then I use Cypress to test against Storybook's URL. It turned out to be a win-win as Storybook is a fantastic tool. – Aaron Mar 11 '20 at 20:09

2 Answers2

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.

Khateeb321
  • 1,861
  • 23
  • 25
  • could you help please https://stackoverflow.com/questions/71517597/cypress-and-cucumber-reset-the-requests-in-next-js – Asking Mar 17 '22 at 19:44
0
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
  • 126
  • 1
  • 6