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

[drj17]

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"
}

[lmiller1990]

Is this fixed by restarting Cypress? If so, it's possible this PR will fix it.

[drj17]

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

[lmiller1990]

Interesting work around. I am not sure I can look at this immediately. I wonder if @ZachJW34 has any ideas? Some kind of Next or Webpack 5 caching?

Did you try using the latest version of our webpack-dev-server package (released 5 days ago?)

[ZachJW34]

@lmiller1990 I applied my fix in #17950 to this project and it fixed this issue. After disabling the loader cache, I did have to delete the .next directory so that my change to the loader was picked up but after that everything was working as expected.

@drj17 after #17950 is merged and you've updated to the new version, this should no longer be an issue (note that you will probably have to delete the .next directory after upgrading but you should only have to do that once.) You can try out my fix locally by making this change:

// node_modules/@cypress/webpack-dev-server/dist/loader.js
function loader() {
   this.cacheable(false) // Add this line here!
   ...
}

Make sure to delete the .next directory to clear the Webpack cache. After that, any new specs should be automatically picked up.

[emilyrohrbough]

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