Configuring Cypress, cypress-react-unit-test, and 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.