https://cypress.io logo
Join Discord
Powered by
Hi there! I have a quick question. We use cypress ...
# component-testing
m
Hi there! I have a quick question. We use cypress for e2e testing right now, and I'd like to try it for component testing too! But my project is structured a bit like a monorepo:
Copy code
.
├── backend
│   ├── package.json
│   └── src
├── cypress
│   └── e2e
├── package.json
└── react
    ├── package.json
    └── src
(where 
react
is a CRA app where my components live). Does this setup require any special setup for component testing?
w
This should be fine. You can add a custom 
specPattern
in the 
component
part of your config after setting up component testing, where you can use a glob to tell Cypress where to look for component specs. Which probably would be side by side with your react components in react/src
m
Gotcha. I'll try that!
Do I still need to do this in this situation?
when I skip this step, I get this message
but I don't think I should have to install CRA stuff in the root directory?
w
hmm. Cypress uses those dependencies to run a dev server for you that's going to serve the HTML page into with it will mount your components for testing. Let me see if we have a way for you to manually specify "these dependencies are actually not mentioned, in the root package.json, go and look for them in this other place"
I don't see a way to do that at the moment based on how we detect dependencies. I suppose the immediate solution/question is, does it hurt anything if you move the Cypress project inside the React directory? Or create a new Cypress project in there for component testing? Monorepos (like ours at Cypress) can have multiple Cypress projects with different setups, and you can hop between them easily with Global Mode (
cypress open --global
). Since the component tests are probably only relevant to the react directory, and the specs are probably going to be right beside the components themselves, it might make sense to maintain the component testing stuff that way to. A minimal way to set this up might be to open in global mode, then add the 
react
folder as a project. It'll walk you through setup and scaffold the bare minimum config for component testing, and it should find your dependencies since it will be looking in the right place. After that you, can see how you like what's generated and whether that approach is good for you.
7 Views
Next
Powered by