Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cypress 10 | SASS Global Style File Imports Within Next.js - Unable To Run Cypress Component Test

See original GitHub issue

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: cypress-10_import-scss_unable-to-run-component-test

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 the cypress/component.ts file.

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} />)
  })
})