Adding a command for component mount to e2e support file causes an error

[fikip]

Current 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. ✌️

[lmiller1990]

Hi! What a fantastic issue, thanks for all the feedback.

First of all, possibly specifying in documentation to not include cy.mount in the e2e support file would help.

Agreed, but I think this is not necessary after we apply your two following recommendations.

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.

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.

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.

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.

Thanks for the awesome project! You've been saving me hours of headaches for the past several years.

Feels nice to hear this once in a while, it is appreciated and goes a long way!

[fikip]

Hi @lmiller1990, thanks for the warm response!
Excited that you're sharing my opinion on how to handle this and that you've taken the time to assign the issue for processing.
The workaround for now is pretty simple, but, as we've both agreed, it's probably worth improving to save time for future adopters of Component testing.
I'll be looking forward to the improvements.
Cheers!

[ZachJW34]

I've opened a PR to fix this. There are side effects from importing mount which are required for CT testing but cause issues when running e2e tests. Thanks @bozskejkaja for finding this!

[lmiller1990]

That was quick. Looks like this will land in the next release.

[cypress-bot]

The code for this is done in cypress-io/cypress#22633, but has yet to be released.
We'll update this issue and reference the changelog when it's released.