test(wtr): clean up hydration test logic @W-19098266 #5487
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -18,9 +18,8 @@ lwcSsr.setHooks({ | |
| }); | ||
|
|
||
| const ROOT_DIR = path.join(import.meta.dirname, '../..'); | ||
| const COMPONENT_NAME = 'x-main'; | ||
| const COMPONENT_ENTRYPOINT = 'x/main/main.js'; | ||
|
|
||
| // Like `fs.existsSync` but async | ||
| async function exists(path) { | ||
|
|
@@ -32,13 +31,14 @@ async function exists(path) { | |
| } | ||
| } | ||
|
|
||
| async function compileModule(input, targetSSR, format) { | ||
| const modulesDir = path.join(ROOT_DIR, input.slice(0, -COMPONENT_ENTRYPOINT.length)); | ||
| const bundle = await rollup({ | ||
| input, | ||
| plugins: [ | ||
| lwcRollupPlugin({ | ||
| targetSSR, | ||
| modules: [{ dir: modulesDir }], | ||
| experimentalDynamicComponent: { | ||
| loader: fileURLToPath(new URL('../../helpers/loader.js', import.meta.url)), | ||
| strict: true, | ||
|
|
@@ -61,102 +61,49 @@ async function getCompiledModule(dir, compileForSSR) { | |
| }); | ||
|
|
||
| const { output } = await bundle.generate({ | ||
| format, | ||
| name: 'Component', | ||
| globals: { | ||
| lwc: 'LWC', | ||
| '@lwc/ssr-runtime': 'LWC', | ||
| }, | ||
| }); | ||
|
|
||
| return output[0].code; | ||
| } | ||
|
|
||
|
Contributor
Author
There was a problem hiding this comment. This was added in #4649 to suppress logs for cosmetic reasons. WTR surfaces logs differently, so we don't need to keep it. |
||
| /** | ||
| * This function takes a path to a component definition and a config file and returns the | ||
| * SSR-generated markup for the component. It does so by compiling the component and then | ||
| * running a script in a separate JS runtime environment to render it. | ||
| */ | ||
| async function getSsrMarkup(componentEntrypoint, configPath) { | ||
| const componentIife = await compileModule(componentEntrypoint, !ENGINE_SERVER, 'iife'); | ||
| // To minimize the amount of code in the generated script, ideally we'd do `import Component` | ||
| // and delegate the bundling to the loader. However, that's complicated to configure and using | ||
| // imports with vm.Script/vm.Module is still experimental, so we use an IIFE for simplicity. | ||
| // Additionally, we could import LWC, but the framework requires configuration before each test | ||
| // (setHooks/setFeatureFlagForTest), so instead we configure it once in the top-level context | ||
| // and inject it as a global variable. | ||
| const script = new vm.Script( | ||
| `(async () => { | ||
| const {default: config} = await import('./${configPath}'); | ||
|
Contributor
Author
There was a problem hiding this comment. Converting from IIFE to ESM import because the config file doesn't need to be bundled, it just works. |
||
| ${componentIife /* var Component = ... */} | ||
| return LWC.renderComponent( | ||
| '${COMPONENT_NAME}', | ||
| Component, | ||
| config.props || {}, | ||
| false, | ||
| 'sync' | ||
| ); | ||
| })()`, | ||
| { | ||
| filename: `[SSR] ${configPath}`, | ||
| importModuleDynamically: vm.constants.USE_MAIN_CONTEXT_DEFAULT_LOADER, | ||
| } | ||
| ); | ||
|
|
||
| return await script.runInContext(vm.createContext({ LWC: lwcSsr })); | ||
| } | ||
|
|
||
| async function existsUp(dir, file) { | ||
|
|
@@ -172,45 +119,32 @@ async function existsUp(dir, file) { | |
| * Hydration test `index.spec.js` files are actually config files, not spec files. | ||
| * This function wraps those configs in the test code to be executed. | ||
| */ | ||
| async function wrapHydrationTest(configPath) { | ||
| const { default: config } = await import(path.join(ROOT_DIR, configPath)); | ||
|
|
||
| try { | ||
| config.requiredFeatureFlags?.forEach((featureFlag) => { | ||
| lwcSsr.setFeatureFlagForTest(featureFlag, true); | ||
| }); | ||
|
|
||
| const suiteDir = path.dirname(configPath); | ||
| const componentEntrypoint = path.join(suiteDir, COMPONENT_ENTRYPOINT); | ||
| // You can add an `.only` file alongside an `index.spec.js` file to make the test focused | ||
| const onlyFileExists = await existsUp(suiteDir, '.only'); | ||
| const ssrOutput = await getSsrMarkup(componentEntrypoint, configPath); | ||
|
|
||
| return ` | ||
| import * as LWC from 'lwc'; | ||
| import { runTest } from '/helpers/test-hydrate.js'; | ||
| runTest( | ||
|
Contributor
Author
There was a problem hiding this comment. Moved as much logic as I could from the generated code into |
||
| '/${configPath}?original=1', | ||
| '/${componentEntrypoint}', | ||
| ${JSON.stringify(ssrOutput) /* escape quotes */}, | ||
| ${onlyFileExists} | ||
| ); | ||
| `; | ||
| } finally { | ||
| config.requiredFeatureFlags?.forEach((featureFlag) => { | ||
| lwcSsr.setFeatureFlagForTest(featureFlag, false); | ||
| }); | ||
| } | ||
|
|
@@ -226,6 +160,8 @@ export default { | |
| // to return the file unmodified. | ||
| if (ctx.path.endsWith('.spec.js') && !ctx.query.original) { | ||
| return await wrapHydrationTest(ctx.path.slice(1)); // remove leading / | ||
| } else if (ctx.path.endsWith('/' + COMPONENT_ENTRYPOINT)) { | ||
| return await compileModule(ctx.path.slice(1) /* remove leading / */, false, 'esm'); | ||
| } | ||
| }, | ||
| }; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We no longer import from
test-utils, so we don't need to resolve it. (I missed this in the other PRs.)