Cannot setup cypress component testing for a lib or app via the generator #12844
Comments
|
I believe this happens when its not able to find an app's build target where the project you specified is used. @barbados-clemens we should have a better error message for this? What is the logic here? |
|
I created the lib with |
|
I have a similar issue for setting this up for a publishable library (e.g. ng-material-plus) which does have a build target and had the following error. It didn't find the build target so I ran:
It set everything up but when I go to run it it doesn't work: To reproduce this just create a new nx workspace with an angular publishable library and run the angular cypress component generator and fire it up. |
|
@blessanm86 it does look to be an issue where the generator wasn't able to find a build target that the project was being used in, but the more helpful error message wasn't from a null reference. I'll fix that to make sure the better error is more helpful. but you can pass in a --build-target=some-react-app:build to get past it. @tommyc38 the build target has to be an application for it to correctly work a build target for a publishable library won't work as Cypress needs to actually run an app under the hood for component testing, hence the need for an apps build target. I'll work to add more helpful messaging around this. |
|
@barbados-clemens that makes sense. I currently have storybook and cypress hooked up for my lib which currently set up a cypress app (e.g. ng-material-plus-e2e). How can I rig up cypress components to use the same app (e.g. ng-material-plus-e2e) but point it to component tests in my lib/src? Also, has there been any discussion around setting up a build target that can leverage a custom webpack when running the cypress e2e generator? A build target with an executor that allows us to setup the code instrumentation with a custom webpack config has to be done manually. This is cumbersome and I wish Nx would do this automagically for us. Doesn't everyone want code coverage when running cypress???? |
|
the way we've structured the component testing is to be added on the library you are wanting to test, similar to jest unit testing. But nothing is stopping you from configuring your existing cypress project to also run component tests other than the nx generators don't set it up out of the box. If you want to set that up, you just create a new target in the existing cypress apps Now I'm inclined to not recommend this way to set up component testing for a couple things.
as for the question about custom webpack I'm unsure what you're exactly looking for, but since component testing uses the build target you provided to it, you can provide a custom webpack to the build configuration which will be picked up via cypress and ran. If you only want this custom webpack to apply do component testing. you can make a component testing specific configuration under your build target and provide that to the component testing target options under hopefully that helps! let me know if you have any more questions :) |
|
@barbados-clemens thank you! I agree with your points regarding cypress-component testing a lib and am not down with the complexity to get it to work while keeping the tests next to the src code. With respect to the custom webpack configuration, this is needed for reporting cypress test coverage (see cypress docs). Anyone who want's coverage with cypress must create a custom webpack configuration with a loader (e.g. coverage-istanbul-loader) that works with webpack 5 to instrument the code so coverage can be reported. It would be great if the nx generator would ask if we wanted our e2e to include coverage instrumentation and could then generate a webpack config and add a build setup to run e2e with coverage. Does that make better sense what I am getting at? |
|
here is an example setup to get cypress coverage setup: https://github.com/skylock/cypress-angular-coverage-example |
|
Thanks @barbados-clemens I was able to now get the cypress configure generator to run after specifying the built target. I have not edited the generated |
|
@blessanm86 do you have a reproduction I can look at? The tsconfig.cy.json is in the cypress folder and should be linked in the projects tsconfig.json with the references. |
|
Hey, @barbados-clemens I have tried to create a slimed down version of our nx workspace and invited u to a private repo. |
|
@blessanm86 this is because component testing preset assumes the executor for the build target is going to be one of Because of your custom executor the preset won't be able to build the webpack config to pass to cypress component testing. You could just move the tsconfig.cy.json to the root of your project and then you'll be able to get the fallback webpack config. I noticed in your custom nx plugin you already have logic to build your own webpack config in the build executor. const nxConfig = nxComponentTestingPreset(__filename)
const config = createConfig(options, context);
const webpackCommonConfig = createWebpackCommonConfig(config);
const webpackprodConfig = createWebpackProdConfig(config);
const finalConfig = webpackMerge.merge(
webpackCommonConfig,
webpackprodConfig,
);
// replace the nx generated config with your own
nxConfig.devServer.webpackConfig = finalConfig;
export default defineConfig({
component: nxConfig
})you can check how we build and make the executor context inside the nx preset as well and just use those utilities. This sounds like a lot, but it's not too bad since you've already done the hard part of making the webpack configs in your build executor. now it's just assembling them together in a different location, your cypress.config.ts file I'm happy to help walk you through other issues you might have setting this up since it is a bit new and not commonly something people have to do with Nx. Since you've built your own custom nx plugin and executor I'm sure what you see inside the nxComponentTestingPreset will make sense. |
|
@barbados-clemens Thanks for looking into this. I tried what u mentioned and Im able to create my webpack config. My I wonder if the So I updated my webpack config like I have updated my reproduction case. Maybe u know what could be wrong. |
|
Another thing to note is |
|
@barbados-clemens I was able to fix my issue. Turns out a Can this type be loosened up? Thanks for the support. |
|
@barbados-clemens Currently, in our NX workspace, we have apps that are very thin like they just assemble components on a page. My question is, where should the component test be? I believe it should be part of the library instead of the app. |
|
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. |
Current Behavior
Cannot setup cypress component testing for a lib or app via the generator
I get the error
Expected Behavior
Cypress correctly setup
Steps to Reproduce
Im not sure how. Cause it works fine for a fresh nx workspace.
Environment
The text was updated successfully, but these errors were encountered: