Cypress Component Testing (issues and guidelines)

[fyodorio]

Documentation issue

• Reporting a typo
• Reporting a documentation bug
• Documentation improvement
• Documentation feedback

Is there a specific documentation page you are reporting?

Cypress Component Testing — https://nx.dev/packages/cypress/documents/cypress-component-testing

Additional context or description

I haven't found any information on configuring Cypress component testing under nx in terms of global (and component-specific) stylesheets. Tests work good but no CSS is pulled. Tried different approaches (stuff described in official docs here, configuring Angular settings, configuring Cypress for the targeted lib and adding plugin/setup overrides, overriding/complementing nxComponentTestingPreset) but nothing works for me. There's also the very specific question on StackOverflow dedicated to that, just if someone is interested.

Can this part of documentation be extended to provide better guidelines on how to work with styles under the nx preset? It would be really helpful as Cypress is a great tool and component testing is a much better alternative to unit tests for UIs.

[barbados-clemens]

Hi @fyodorio, the styles/assets/scripts will depend on the devServerTarget configured for component testing.

i.e. whatever the build target being used for component testing should pull in the styles/assets/scripts for that build target into the component tests.

The only time this isn't true is for angular preset and when the project being tested (say ng-lib) is not being used within the "linked" app. you can confirm this by using nx graph and seeing if there is an arrow between the two projects.

[fyodorio]

@barbados-clemens thanks a lot for comming with the feedback 🤝

Let me try to re-phrase that for the specifics of my project:

1. In angular.json I have my lib under test with architect.component-test.options.devServerTarget set to the specific setup which has global styles/assets/etc included in it (in my case it's a build target of one of the apps in which my lib is used)
2. My my-app.architect.build.options contains all the necessary asset links which work as needed in the app itself being built
3. My Cypress component tests should catch up the assets (shouldn't they?) — but they don't

Nx graph doesnt show the link between the app and the lib, because of the chain of lazy loading (I guess) — as the app has only the lazy loaded routes. Can it be a breaking point?

[barbados-clemens]

For angular, if the nx graph doesn't show a link between the two projects then we remove the assets/styles/scripts options.
https://github.com/nrwl/nx/blob/master/packages/angular/plugins/component-testing.ts#L227-L237

but even when doing lazy loading you should still have a link between the projects, they links will just be marked as 'dynamic', which doesn't matter when checking if there is a link between projects in the component testing preset.

[fyodorio]

OK, I see now. I guess that's exactly what's hapenning. I believe the links between libs and apps are kinda broken in my project (it's quite a legacy project, though it actually works as it should more or less in all other parts). I guess it will be quite hard to investigate why, but coming from the opposite side: is there any way to enforce preserving the styles options on the plugin level? Or maybe you could suggest any alternative, like manual configuration with some predefined parameters matching the way the plugin works?

[fyodorio]

Why is it closed as completed? 🤦‍♂️ Why are you always so predictable guys, what do you even call "support"? Getting stuck with your tools not the first time because of this lack of responsiveness.

There's a blocking issue with using Cypress under Nx for component testing, this issue happens for quite some time, and for bunch of folks, if you search the Internets. So could you please explain the reason for closing it? (cc @vsavkin @juristr)

[barbados-clemens]

didn't see your earlier reply and it was auto closed with the docs update PR explaining what I posted earlier about how nx excludes things for angular CT if there isn't a link between the projects.

As to answer your question:

If you're saying the Nx graph construction between the two projects is wrong, you'll want to open up a separate issue for that so the correct folks take a look at it. Make sure to include a reproducible as those issues can be really hard to debug.

As for an alternative you can just modify the values given to cypress, since it's just an object. The nx preset just sets up values for you so you don't have to worry about it.

to manually modify it you just update the object like the JSDocs on the function mentions. Here is it talked about in the docs.

Or more specifically in your case

const config = nxComponentTestingPreset(__filename);
config.devServer.options.projectConfig.buildOptions.<whatever you want to modify> = "some value"
console.log(JSON.stringify(config, null, 2)); // inspect what is in the object

export default defineConfig({
  component: config;
});

that object is essentially what you'd find in the project.json of the build target you're using, just slightly modified to account for cypress specific things like pathing.

Hope that helps.

[fyodorio]

@barbados-clemens thanks for coming back with the feedback, the repo automation should be fixed if it works this way, I believe it may cause other similar unintended ticket closings, and that's a big deal in terms of support accountability (@vsavkin @juristr), a bigger issues than this one itself. And talking about this one, let's open it back please.

I actually saw the notes in code and docs related to extending the default config, but it didn't work for me, I mentioned that clearly in the issue description (that's basically the main issue, if it would work — it'd be a solution I believe). That why I asked about other possible hidden implications of that.

What is project.json? angular.json and any specific part of it? Which exactly if so? I have already styles settings there, maybe anything else? Which pathing declarations should be changed specifically and where?

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.