Component Testing with Next.js: No tests found

[justintemps]

I'm having some trouble getting Component Tests setup with Next.js.

Running npx cypress open-ct will open the Test Runner and identify the spec file, but when I open it, Cypress shows a No tests found error: Cypress could not detect tests in this file

cypress.json

{
  "baseUrl": "http://localhost:8080",
  "chromeWebSecurity": false,
  "videoUploadOnPasses": false,
  "testFiles": "**/*spec.{js,jsx,ts,tsx}",
  "component": {
    "componentFolder": "components",
    "testFiles": "**/*spec.{js,jsx,ts,tsx}",
    "viewportHeight": 500,
    "viewportWidth": 700
  }
}

cypress/plugins/index.js

const injectDevServer = require("@cypress/react/plugins/next");
const webpackPreprocessor = require("@cypress/webpack-preprocessor");

module.exports = (on, config) => {
  on("file:preprocessor", webpackPreprocessor());
  injectDevServer(on, config);
  return config;
};

cypress/tsconfig.json

{
  "extends": "../tsconfig.json",
  "include": ["../**/*.ts*"]
}

package.json

{
  ...
  "dependencies": {
    ...
    "next": "^10.2.3",
    "next-build-id": "^3.0.0",
    "next-compose-plugins": "^2.2.1",
    "next-optimized-images": "^2.6.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "styled-components": "^5.3.0",
  },
  "devDependencies": {
    "@cypress/react": "^5.9.4",
    "@cypress/webpack-dev-server": "^1.4.0",
    "@cypress/webpack-preprocessor": "^5.9.1",
    "@testing-library/cypress": "^8.0.0",
    "@types/react": "^16.14.7",
    "@types/styled-components": "^5.1.12",
    "babel-plugin-styled-components": "^1.13.2",
    "cypress": "^8.3.0",
    "cypress-wait-until": "^1.7.1",
    "html-webpack-plugin": "5",
    "typescript": "^4.0.3",
    "webpack": "5",
    "webpack-dev-server": "3"
  }
}

next.config.js

const path = require("path");

const nextConfig = {
  future: {
    webpack5: true,
  }
};

module.exports = nextConfig;

components/link/link.spec.tsx

import { mount } from "@cypress/react";
import Link from "./variants/default";

describe("Link", () => {
  it("renders a link", () => {
    mount(<Link href="/">Test Link</Link>);
    cy.get("a").contains("Test Link").click();
  });
});

components/link/variants/default.tsx

import React from "react";
import NextLink, { LinkProps } from "next/link";
import styled, { StyledComponentProps } from "styled-components";

const A = styled.a`
  text-decoration: none;
`;

interface NativeLinkProps
  extends Omit<StyledComponentProps<"a", any, {}, never>, "href"> {}

const DefaultLink: React.FC<LinkProps & NativeLinkProps> = ({children, ...props}) => {
  return (
    <NextLink {...props}><A {...props}>{children}</A>
    </NextLink>
  );
};

export default DefaultLink;

[justintemps]

Upgrading to Next 11.1.0 seems to fix this.

[g10]

note: it has to be the exact version

"next": "11.1.0"

both 11.1.1 and 11.1.2 throw an error with webpack, and timout on wait until bundle finished...

✖ ｢wdm｣: TypeError: Cannot read property 'traceChild' of undefined
...
ℹ ｢wdm｣: wait until bundle finished: /__cypress/src/index.html