test: [M3-7820] - Suppress Cypress "MODULE_LEVEL_DIRECTIVE" and "SOURCEMAP_ERROR" warnings #10239
Conversation
…gs when building Cypress tests
jdamore-linode
requested review from
cliu-akamai
and removed request for
a team
jdamore-linode
requested review from
bnussman-akamai and
hkhalil-akamai
and removed request for
a team
|
Coverage Report: ✅ |
| @@ -1,10 +1,36 @@ | |||
| import react from '@vitejs/plugin-react-swc'; | |||
| import svgr from 'vite-plugin-svgr'; | |||
There was a problem hiding this comment.
Is this package related?
There was a problem hiding this comment.
Yeah, I imported both of these plugins to mirror what we're doing in Cloud's Vite config.
plugin-react-swc is really the crucial one, but I opted to include svgr as well for two reasons:
- As a safeguard in case we ever import a file in
srcfrom within a Cypress test, which in turn imports an SVG file (or imports a module which imports a module which imports an SVG, etc.). I would expect that to either cause a warning to get logged, or possibly even prevent the spec from building - I figure since it isn't harmful and it makes us more consistent with Cloud's config, why not 🤷♂️😅
| @@ -1,10 +1,36 @@ | |||
| import react from '@vitejs/plugin-react-swc'; | |||
There was a problem hiding this comment.
Are there any tradeoffs to using swc -- i.e., build differences between e2e and prod?
There was a problem hiding this comment.
No, but only because Cloud also uses @vitejs/plugin-react-swc!
I think we opted to use that for performance reasons (swc is fast), and so I used it here too, but both @vitejs/plugin-react and @vitejs/plugin-react-swc contain the exact same log suppression logic (so either would really work here for the purpose of this ticket).
One thing to note is that this Vite config is only used when building the Cypress *.spec.ts files -- Cloud itself is always built using the Vite config in packages/manager, so while consistency between the configs is good, we're not at risk of ending up in a situation where e.g. Cloud is built differently when running our Cypress tests, resulting in bugs being present (or absent) in our tests but not in Production or vice-versa.
There was a problem hiding this comment.
Ahh didn't know that. Thanks for the explanation.
| if (warning.code === 'SOURCEMAP_ERROR') { | ||
| return; | ||
| } |
There was a problem hiding this comment.
Is there any reason not to suppress MODULE_LEVEL_DIRECTIVE the same way?
There was a problem hiding this comment.
Yeah, the MODULE_LEVEL_DIRECTIVE warning is suppressed by the @vitejs/plugin-react-swc plugin. We could manually suppress it and drop the React and SVGR plugins, but I opted to do it this way since we already have these dependencies installed and we're importing more and more src code from the Cypress tests.
I appreciate these good questions, @hkhalil-akamai!
jdamore-linode
added
Add'tl Approval Needed
bnussman-akamai
added
Approved
Description 📝
Recent improvements to Cloud Manager's dev tools introduced various
MODULE_LEVEL_DIRECTIVEandSOURCEMAP_ERRORconsole warnings when Cypress builds each spec file via Vite.The cause of these warnings is relatively well-understood[1] and the underlying issue(s) are harmless and irrelevant from a Cloud Manager development perspective. This PR addresses the issue by using the
@vitejs/react-plugin-swcplugin to suppress theMODULE_LEVEL_DIRECTIVEwarning, and by manually supressing the relatedSOURCEMAP_ERRORwarnings.(1) MUI contains
'use client'module-level directives, which are intended to allow library developers to denote client-side and server-side code. Meanwhile, Rollup (and therefore Vite) does not support module-level directives, hence the warning.Changes 🔄
@vitejs/plugin-react-swcin Cypress Vite config to suppressMODULE_LEVEL_DIRECTIVEwarningsSOURCEMAP_ERRORRollup warnings in Cypress Vite configPreview 📷
|
How to test 🧪
We can rely on the automated tests for this. We just want to confirm that the tests continue to pass and that all of the relevant console warnings have been suppressed.
As an Author I have considered 🤔
Check all that apply