cypress
cypress copied to clipboard
cypress-io
Testing Next.js built in components
What would you like?
Not sure if this makes sense for a component test (maybe E2E)? Either way, I received this question, and we should either support it or make a recommendation for how to write this kind of test with Next.js built in components:
Request: How to test component with <Head> (from Next.js) in component testing. Docs: https://nextjs.org/docs/api-reference/next/head
Use:
import Head from 'next/head'
export const Foo = (props) => {
return (
<div>
<h1>OK</h1>
<Head><title>{props.headerTitle}</title></Head>
</div>
)
}
Test:
import { Foo } from './Foo.tsx'
it('works', () => {
cy.mount(<Foo headerTitle="This is the title" />)
})
<Head> is completely stripped out and does not appear.
Why is this needed?
Anyone writing Next.js apps and using CT would expect this to work.
Other
No response
Hey team! Please add your planning poker estimate with Zenhub @amehta265 @astone123 @lmiller1990 @marktnoonan @mike-plummer @rockindahizzy @warrensplayer @ZachJW34
Interesting one - I guess we need to know the behavior before we really estimate, so some research and thinking is needed.
I think the problem is Next.js injects some magic to <Link> etc. when it does SSR - I think we probably need to look into what actually happens and how we might replicate this. An alternative would be to provide a work-around, but imo we probably want to look more deeply into tighten Next.js integration.
I'm estimating based on this being a spike to understand the surface area, not something we implement right off the bat.
@lmiller1990 Is this problem specific to HEAD? I could be wrong, but it seems uncommon to use HEAD in components other than for page layout like: https://github.com/vercel/next.js/blob/canary/examples/cms-sanity/pages/_document.js
@baus Head allows lower-level components to inject/alter content of the HTML head even if they're buried deep down within the hierarchy (not necessarily at the "layout" level). It's often used to change the page title and meta tags for SEO (particularly for CMS-generated pages) and to pull in third-party scripts that aren't needed for all pages in a site. It wouldn't be super-prevalent in plain-old React components, but the special Page components (that have the extra Next magic like getServerSideProps) would use it liberally
@baus I (wrongly) assumed it was all components, it looks like it might just be <Head>.
This is a good point, if it's just <Head> it's probably not a big deal for GA. As @mike-plummer points out, it's a pretty important feature as far as Next.js specific features go, so we should make some efforts to support it eventually... but we can likely get away with something like "this is outside the scope for GA" - instead, we will document known limitations and add them to a post-GA roadmap.
I think getServerSideProps is probably more important, but also could be a post GA feature.
@mike-plummer can you explain when you would use <Head> over <Script> for instances of pulling in 3rd party scripts?
