Cannot read properties of undefined (reading 'displayName') for Cypress component test - reactjs

Question

I have a working nextjs app and am wanting to add Cypress component tests for my react components.
e2e cypress tests are working without issue, but when trying to implement component tests I'm receiving the error, "Cannot read properties of undefined (reading 'displayName')" when trying to mount a component.
I followed the documentation at https://docs.cypress.io/guides/component-testing/component-framework-configuration#Next-jsn and also accepted the configuration that was generated by the cypress tool when I ran yarn cypress.
My code with component testing issue is at https://gitlab.com/kennyrbr/activ/-/tree/cypress-testing/web
Here is where I'm attempting to mount .
import React from 'react';
import { mount } from '#cypress/react';
import { NavBar } from '../../components/NavBar';
describe('NavBar.cy.ts', () => {
it('playground', () => {
cy.mount(`<NavBar />`);
});
});
My package.json is
{
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"gen": "graphql-codegen --config codegen.yml",
"cypress": "cypress open"
},
"dependencies": {
"#graphql-codegen/typescript-urql": "^3.6.1",
"#urql/exchange-graphcache": "^4.4.3",
"daisyui": "^2.22.0",
"formik": "^2.2.9",
"graphql": "^16.5.0",
"next": "latest",
"next-urql": "^3.3.3",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-is": "^18.2.0",
"urql": "^2.2.2",
"yup": "^0.32.11"
},
"devDependencies": {
"#cypress/react": "^6.1.1",
"#cypress/webpack-dev-server": "^2.2.0",
"#graphql-codegen/cli": "^2.8.0",
"#graphql-codegen/typescript": "^2.7.1",
"#graphql-codegen/typescript-operations": "^2.5.1",
"#testing-library/cypress": "^8.0.3",
"#types/node": "17.0.35",
"#types/react": "18.0.9",
"#types/react-dom": "18.0.5",
"autoprefixer": "^10.4.7",
"cypress": "^10.6.0",
"html-webpack-plugin": "^5.5.0",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.2",
"typescript": "4.7.2",
"webpack": "^5.74.0",
"webpack-dev-server": "^4.10.0"
}
}
Here's the error which displays after running yarn cypress and choosing component testing for the 'NavBar.cy.ts' test.
N.B., I did add a few dev dependencies because I was receiving a webpack warning early on.
Any help is greatly appreciated.
edit:
I had added an incorrect displayName assignment to some of my components in an attempt to get cypress component testing working - and had forgotten to remove in a previous commit. This wasn't even the issue as displayName couldn't be read from undefined, so I think the issue is that the component/s aren't available to cypress. In any case, it was wrong and I've removed.

Answer 1

The basic problem is the parameter you are passing into cy.mount() isn't being compiled to JSX.
Two things should fix it
take the quotes off the JSX, so it should be cy.mount(<NavBar />);
change the extension of the spec file to NavBar.cy.tsx

Answer 2

It's not really a working nextjs app, you are getting the exact same message from a different component SelectActivType.tsx when you you run the app (outside of the Cypress test).
In terms of the NavBar, the code should be adjusted from this
export const NavBar: React.FC<NavBarProps> = ({}) => {
NavBar.displayName = 'ActivTypes';
const router = useRouter();
return (
...
);
}
to this
export const NavBar: React.FC<NavBarProps> = ({}) => {
const router = useRouter();
return (
...
);
}
// move the offending line outside of the function
NavBar.displayName = 'ActivTypes';
You cannot add a property to a function inside the function definition.
For reference see how to set displayName in a functional component [React].