cypress-react-webpack

[dadirakeshreddy]

Hi Everyone,
I need a little help on how to write component unit tests in cypress with react-webpack configuration.

I'm trying to write component unit test in cypress with react and webPack configuration. I did setup as per the documentation (https://docs.cypress.io/guides/component-testing/introduction#Install). Whenever I run cypress open, it open's up cypress window and in the test suite it is pointing to cypress/integration folder.

Folder structure:

 react-wepack
 |__ cypress
      |__ fixtures
      |__ integration
      |__ plugins -> index.js
      |__ support -> index.js
 |__ src
      |__ App.tsx
      |__ App.test.js
 |__ cypress.json
 |__ package.json
 |__ tsconfig.json
 |__ webpack.config.json

cypress/plugins/index.js

 module.exports = (on, config) => {
  if (config.testingType === 'component') {
    const { startDevServer } = require('@cypress/webpack-dev-server')
    // Your project's Webpack configuration
    const webpackConfig = require('../../webpack.config.ts')
    on('dev-server:start', (options) =>
      startDevServer({ options, webpackConfig })
    )
  }
}

webpack.config.ts

import path from "path";
import { Configuration as WebpackConfiguration } from "webpack";
import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server";
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';


interface Configuration extends WebpackConfiguration {
  devServer?: WebpackDevServerConfiguration;
}

const config: Configuration = {
  entry: "./src/index.tsx",
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              "@babel/preset-env",
              "@babel/preset-react",
              "@babel/preset-typescript",
            ],
          },
        },
      },
    ],
  },
  plugins: [
    new ForkTsCheckerWebpackPlugin({
      async: false,
      eslint: {
        files: "./src/**/*",
      },
    }),
  ],
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js",
  },
  devServer: {
    contentBase: path.join(__dirname, "build"),
    compress: true,
    port: 4000,
  },
};

export default config;

cypress.json

{
  "baseUrl": "http://localhost:4000",
  "testFiles": "cypress/integration/*.spec.js",
  "component": {
    "componentFolder": "src",
    "testFiles": "**/*test.js",
    "viewportHeight": 500,
    "viewportWidth": 700
  }
}

tsconfig.json

{
  "compilerOptions": {
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "types": [
      "cypress"
    ]
  },
  "include": [
    "src",
    "src/App.test.js"
  ]
}

package.json

{
  "name": "react-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --open",
    "test": "cypress open"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@cypress/webpack-preprocessor": "^5.9.1",
    "html-webpack-plugin": "^4.5.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/plugin-transform-runtime": "^7.14.5",
    "@babel/preset-env": "^7.14.7",
    "@babel/preset-react": "^7.14.5",
    "@babel/preset-typescript": "^7.14.5",
    "@babel/runtime": "^7.14.6",
    "@cypress/react": "^5.9.1",
    "@cypress/webpack-dev-server": "^1.4.0",
    "@types/fork-ts-checker-webpack-plugin": "^0.4.5",
    "@types/react": "^17.0.13",
    "@types/react-dom": "^17.0.8",
    "@types/webpack": "^5.28.0",
    "@types/webpack-dev-server": "^3.11.5",
    "@typescript-eslint/eslint-plugin": "^4.28.2",
    "@typescript-eslint/parser": "^4.28.2",
    "babel-loader": "^8.2.2",
    "cypress": "^7.6.0",
    "eslint": "^7.30.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "fork-ts-checker-webpack-plugin": "^6.2.12",
    "ts-node": "^10.0.0",
    "typescript": "^4.3.5",
    "webpack": "^5.42.1",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  }
}

cypress window

[ElamuruganGR]

@dadirakeshreddy You need to run cypress open-ct for running unitTestCases with cypress.

cypress open -> e2e
cypress open-ct -> component testing