[Component Testing] New test code is not being bundled using NextJS 11.1 and Webpack 5

Current behavior

When creating a new *.spec.{tsx, jsx} file in the specified component folder, these tests cannot be run.

Similarly, if you delete a spec file the compiler will complain that the file {file}.spec.tsx cannot be found.

The only work around I’ve found is to manually delete the .next folder so that it actually bundles the code when I run cypress open-ct.

Desired behavior

No response

Test code to reproduce

1. clone https://github.com/drj17/cypress-component-test-bug
2. run yarn install && yarn cypress open-ct
3. Duplicate existing cypress/pages/index.spec.jsx file
4. Try to run it, see “No tests found error”
5. Delete .next folder, re-run yarn cypress open-ct, tests now show show up.

Cypress Version

8.3.1

Other

package.json

{
  "name": "cypress-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "11.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@cypress/react": "^5.9.4",
    "@cypress/webpack-dev-server": "^1.4.0",
    "@types/react": "^17.0.19",
    "cypress": "^8.3.1",
    "eslint": "7.32.0",
    "eslint-config-next": "11.1.0",
    "html-webpack-plugin": "5",
    "webpack": "5",
    "webpack-dev-server": "3"
  }
}

plugins/index.js

/// <reference types="cypress" />
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)

/**
 * @type {Cypress.PluginConfig}
 */
// eslint-disable-next-line no-unused-vars
const injectDevServer = require("@cypress/react/plugins/next");

module.exports = (on, config) => {
  injectDevServer(on, config);

  return config;
};

cypress.json:

{
  "testFiles": "**/*.spec.jsx",
  "componentFolder": "cypress/pages"
}

[drj17]

It does seem related, but in my case it only was fixed when I deleted the .next folder

[emilyrohrbough]

This was released as @cypress/webpack-dev-server-v1.8.1 on 2022-02-08.