Cypress 10 | SASS Global Style File Imports Within Next.js - Unable To Run Cypress Component Test #22525
Description
Current behavior
After launching Cypress Component Test application for the Next.js project, and importing multiple SASS (.scss) files from within the cypress/component.ts file, then i am unable to run a defined component test within the file news-aggregator-article.cy.tsx (link to file on repo). On the test rendering panel, only the text Cannot GET /__cypress/src/index.html is rendered out.
See the highlighted screenshot below:
Is it not currently possible to import / support SASS style files for component testing? Or am i missing a step? 🤔
If SASS imports are currently not supported, are you able to advise or recommend how I may be able to render the styles within the component test?
Warning - The component test will successfully run (without SASS styles) if the imported SASS (
.scss) files are removed from within thecypress/component.tsfile.
Note - This is a Next.js project that was initially scaffolded via
npx create-next-app, and then configured to use SASS afterwards (npm install --save-dev sass).
Desired behavior
The component test should run within the Cypress Component Test application window, as well as successfully importing and rendering the styles defined within the SASS files (.scss)
Test code to reproduce
You may reproduce the issue by cloning the project from the repo; nextjs-playground, and then checkout the branch; cypress-integration
The relevant code files are listed below.
file: component.ts:
...
import '../../styles/globals.scss'
import '../../styles/Index.module.scss'
import '../../components/news-aggregator/news-aggregator-article.module.scss'
...file: news-aggregator-article.cy.tsx (component test):
import NewsAggregatorArticle from "./news-aggregator-article"
describe('news-aggregator-article.tsx', () => {
it('should render with article data', () => {
// given
const article = {
id: 15547,
title: 'InSight teams push for more science in lander’s final months, Curiosity continues trek around Gale Crater',
url: 'https://www.nasaspaceflight.com/2022/06/insight-curiosity-june-2022/',
imageUrl: 'https://www.nasaspaceflight.com/wp-content/uploads/2022/06/jpegPIA25287-1170x702.jpeg',
summary: 'In May 2022, members of NASA’s InSight Mars lander team announced that power levels on the lander were diminishing and that they expected the lander to become inoperative by December 2022. However, InSight’s teams want to push the lander to do as much as possible in its final months and have chosen to operate the lander’s seismometer for longer than previously planned.',
publishedAt: '2022-06-25T16:42:33.000Z',
updatedAt: '2022-06-25T19:27:56.825Z',
newsSite: 'Space Fight News',
featured: false,
launches: [
{
id: 'df8d4fdb-9add-4ce9-9f0e-aae1c61df212',
provider: 'Launch Library 2'
},
{
id: '3b633f7e-fad9-480e-9011-f38d1bb2f932',
provider: 'Launch Library 2'
}
],
events: [],
}
cy.mount(<NewsAggregatorArticle article={article} />)
})
})Cypress Version
10.2.0
Other
No response