Adding a command for component mount to e2e support file causes an error
See original GitHub issueCurrent behavior
I’m having issues launching e2e tests if I include the custom cy.mount
command used for component testing in the support file for e2e tests. I’m not sure if this is intentional or not.
Launching any e2e test with the custom cy.mount
command included results in the following error:
Moving the custom cy.mount
command to component.tsx
does seem to fix the issue
My support
folder is structured as follows:
support
- commands.tsx
- component.ts
- component-index.html
- e2e.ts
- TestsWrapper.tsx
Both e2e.ts
and component.ts
include identical code (import the commands.tsx
file):
import './commands'
import '@cypress/code-coverage/support'
The custom cy.mount
command looks as follows:
Cypress.Commands.add('mount', (component, options = {}) => {
const wrapped = <TestsWrapper>{component}</TestsWrapper>
return mount(wrapped, options)
})
The TestsWrapper
is a React wrapper component that includes several Providers, but that doesn’t seem to be causing the issue here. Writing the command as its simplest version, Cypress.Commands.add('mount', mount)
, still throws the same error.
My logic here was that I wanted to keep the commands separate from other setup code for improved composition, as this approach is also recommended in the documentation here. The error however wasn’t particularly verbose as to what exactly is going wrong. Maybe the command is somehow executed on initialization?
Desired behavior
I believe that there are a few ways to improve on this behaviour.
First of all, possibly specifying in documentation to not include cy.mount
in the e2e support file would help.
Secondly, improving the error reported through Cypress in this specific case to include something like “Are you possibly including the mount
command for component testing in end-to-end testing?” might also be helpful.
Finally, as I’m not 100% sure if this is a bug or not, in the case it is, the custom mount
command inclusion should not throw an error at all.
Test code to reproduce
I’ve forked your cypress-test-tiny
repo, added create-react-app
, initialized component testing and moved around the code in cypress/support
file to adhere to the structure I’ve mentioned above.
The error occurs on e2e testing.
Repo link here.
Cypress Version
10.3.0
Other
Thanks for the awesome project! You’ve been saving me hours of headaches for the past several years. ✌️
Issue Analytics
- State:
- Created a year ago
- Comments:5 (3 by maintainers)
Top GitHub Comments
Hi! What a fantastic issue, thanks for all the feedback.
Agreed, but I think this is not necessary after we apply your two following recommendations.
This would also make sense, but we know if you are in CT or E2E. I think we could be smarter about it - see my next comment.
I’m thinking the same thing - if we are in E2E and we see someone is using mount, we should just swallow the error. My only concern is, if the CT support file has some big imports, it might slow down E2E slightly, since a user might erroneously import all their CT support commands to their E2E tests, too. In this case, the error (which can be better, like you suggested) would be a good thing.
Either way, I agree with the general idea that the error is confusing and we should either make it better, or intelligently ignore it. I assigned this issue to the Component Testing team for someone to pick up in the near future.
Feels nice to hear this once in a while, it is appreciated and goes a long way!
That was quick. Looks like this will land in the next release.