1

When mounting a component from my nx monorepo in my cypress component test runner, the custom styles are not applied to the mounted component. These styles are scss files, so i dont really know how to compile/include these styles right before mounting it.

Could anyone give an insight on how to solve this problem? Where do i need to step in and include the scss files?

Thanks in advance ^^

Bambi
  • 139
  • 8

2 Answers2

3

Since you originally asked this question Angular support + Cypress docs have improved a lot.

There is an option that allows you to include styles including SCSS, shown on this page Options API - as simple as including a path to your styles in the buildOptions section.

cypress.config.ts

import { defineConfig } from 'cypress'

export default {
  component: {
    devServer: {
      framework: 'angular',
      bundler: 'webpack',
      options: {
        projectConfig: {
          root: '',
          sourceRoot: 'apps/my-app',
          buildOptions: {
            outputPath: 'dist/my-app',
            index: 'apps/my-app/src/index.html',
            main: 'apps/my-app/src/main.ts',
            polyfills: 'apps/my-app/src/polyfills.ts',
            tsConfig: 'apps/my-app/tsconfig.app.json',
            inlineStyleLanguage: 'scss',
            assets: ['apps/my-app/src/favicon.ico', 'apps/my-app/src/assets'],

            styles: ['apps/my-app/src/styles.scss'],

            scripts: [],
            buildOptimizer: false,
            optimization: false,
            vendorChunk: true,
            extractLicenses: false,
            sourceMap: true,
            namedChunks: true,
          },
        },
      },
    },
  },
}
Ali Suliman
  • 175
  • 6
-1

I think i found an answer!

You just have to refer to a scss file in your @Component in your component.ts file.

Example:

@Component({
    selector: "appname-create-discussion-pop-up",
    templateUrl: "./create-discussion-pop-up.component.html",
    styleUrls: ["../styles.scss"],
})
Bambi
  • 139
  • 8
  • 1
    Are `styles.scss` global styles? It would be incorrect to include them within the component itself because that would cause a duplication of the styles both globally and component-scoped in your production app. You shouldn't have to touch the source file to make the testing work correctly. – MattTreichel Jun 08 '23 at 21:15
  • This answer is not correct, test harness is an abstraction _over_ existing functional code, it shouldn't bring unnecessary changes to it – Fyodor Jul 18 '23 at 08:07