Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 9f28dd1

Browse files
abhagta-sfdcabhagta-sfdc
authored
@W-17983974 add SSRv2 support for unit testing (#371)
1 parent f99aace commit 9f28dd1

File tree

22 files changed

+416
-217
lines changed

22 files changed

+416
-217
lines changed

‎example-ssr/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,3 +208,7 @@ We recommend using the same framework for component testing: **WebdriverIO** in
208208
We strongly recommend running performance tests at the page level. The sample tests are shown at the component level for demonstration purposes only.
209209

210210
For sample tests, please refer to: [Performance Sample Test](https://github.com/salesforce/lwc-test/blob/master/example-ssr/src/modules/x/hello/__performance__/hello.ssr-performance.test.js)
211+
212+
### SSR Compiler Version Support
213+
214+
We now support testing against both SSR Compiler v1 and v2. By default, tests run against SSR v2. However, if you want to test with v1, set the environment variable `LWC_SSR_MODE` to `v1`.

‎example-ssr/src/modules/x/basic/__tests__/basic-data-driven.ssr-server.test.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,11 @@ import tests from './test-data';
44

55
describe('<x-basic>', () => {
66
it.each(tests)('should render on the server (props = $props)', async ({ props }) => {
7-
const { renderedComponent, snapshotHash } = renderAndHashComponent('x-basic', Basic, props);
7+
const { renderedComponent, snapshotHash } = await renderAndHashComponent(
8+
'x-basic',
9+
Basic,
10+
props
11+
);
812
expect(renderedComponent).toMatchSnapshot(snapshotHash);
913
});
1014
});

‎example-ssr/src/modules/x/hello/__tests__/hello.ssr-server.test.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,10 @@ import { renderAndHashComponent } from '@lwc/jest-ssr-snapshot-utils';
33

44
describe('<x-hello>', () => {
55
test('should render on the server', async () => {
6-
const { renderedComponent, snapshotHash } = renderAndHashComponent('x-hello', Greeting);
6+
const { renderedComponent, snapshotHash } = await renderAndHashComponent(
7+
'x-hello',
8+
Greeting
9+
);
710
expect(renderedComponent).toMatchSnapshot(snapshotHash);
811
});
912
});

‎example-ssr/src/modules/x/lightDomClickMe/__tests__/lightDomClickMe.ssr-server.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { renderAndHashComponent } from '@lwc/jest-ssr-snapshot-utils';
33

44
describe('<x-light-dom-click-me>', () => {
55
test('should render on the server', async () => {
6-
const { renderedComponent, snapshotHash } = renderAndHashComponent(
6+
const { renderedComponent, snapshotHash } = await renderAndHashComponent(
77
'x-light-dom-click-me',
88
LightDomClickMe
99
);

‎package.json‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,14 @@
2727
"license": "MIT",
2828
"devDependencies": {
2929
"@babel/core": "^7.24.4",
30-
"@lwc/compiler": "8.9.0",
31-
"@lwc/engine-dom": "8.9.0",
32-
"@lwc/engine-server": "8.9.0",
30+
"@lwc/ssr-runtime": "^8.16.0",
31+
"@lwc/compiler": "^8.16.0",
32+
"@lwc/engine-dom": "^8.16.0",
33+
"@lwc/engine-server": "^8.16.0",
3334
"@lwc/module-resolver": "^8.1.0",
34-
"@lwc/synthetic-shadow": "8.9.0",
35-
"@lwc/wire-service": "8.9.0",
35+
"@lwc/synthetic-shadow": "^8.16.0",
36+
"@lwc/wire-service": "^8.16.0",
37+
"@lwc/template-compiler": "^8.16.0",
3638
"@types/jest": "^29.5.12",
3739
"@typescript-eslint/eslint-plugin": "^7.5.0",
3840
"@typescript-eslint/parser": "^7.5.0",

‎packages/@lwc/jest-preset/ssr/jest-preset.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ module.exports = {
1010
snapshotSerializers: [require.resolve('../src/ssr/html-serializer.js')],
1111
resolver: require.resolve('../src/ssr/resolver.js'),
1212
transform: {
13-
'^.+\\.(js|ts|html|css)$': require.resolve('@lwc/jest-transformer'),
13+
'^.+\\.(js|ts|html|css)$': require.resolve('@lwc/jest-transformer/ssr'),
1414
},
1515
testMatch: ['**/__tests__/**/?(*.)ssr-(spec|test).(js|ts)'],
1616
coveragePathIgnorePatterns: ['.css$', '.html$'],

‎packages/@lwc/jest-ssr-snaphot-utils/src/__tests__/ssr-snapshot-utils.test.js‎

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ jest.mock('@lwc/engine-server', () => ({
77
renderComponent: jest.fn(),
88
}));
99

10+
jest.mock('@lwc/ssr-runtime', () => ({
11+
serverSideRenderComponent: jest.fn(),
12+
}));
13+
1014
jest.mock('fs', () => ({
1115
readdirSync: jest.fn(),
1216
readFileSync: jest.fn(),
@@ -19,28 +23,42 @@ jest.mock('crypto', () => ({
1923
})),
2024
}));
2125

26+
const ssrMode = process.env.LWC_SSR_MODE || 'v2';
27+
2228
describe('Snapshot utilities service', () => {
2329
describe("'renderAndHashComponent' service to genarate markup and hash", () => {
24-
it('should render the component and return the markup and snapshot hash', () => {
30+
it('should render the component and return the markup and snapshot hash', async () => {
2531
const mockMarkup = '<div>some markup</div>';
2632
const mockTagName = 'my-component';
2733
const mockCtor = jest.fn();
2834
const mockProps = { prop: 'value' };
2935
const customTestEnv = { wire: '' };
3036

3137
require('@lwc/engine-server').renderComponent.mockReturnValue(mockMarkup);
32-
33-
const result = renderAndHashComponent(mockTagName, mockCtor, mockProps, customTestEnv);
38+
require('@lwc/ssr-runtime').serverSideRenderComponent.mockReturnValue(mockMarkup);
39+
const result = await renderAndHashComponent(
40+
mockTagName,
41+
mockCtor,
42+
mockProps,
43+
customTestEnv
44+
);
3445

3546
expect(result).toEqual({
3647
renderedComponent: mockMarkup,
3748
snapshotHash: 'mockedHash',
3849
});
39-
expect(require('@lwc/engine-server').renderComponent).toHaveBeenCalledWith(
40-
mockTagName,
41-
mockCtor,
42-
mockProps
43-
);
50+
if (ssrMode === 'v1')
51+
expect(require('@lwc/engine-server').renderComponent).toHaveBeenCalledWith(
52+
mockTagName,
53+
mockCtor,
54+
mockProps
55+
);
56+
else
57+
expect(require('@lwc/ssr-runtime').serverSideRenderComponent).toHaveBeenCalledWith(
58+
mockTagName,
59+
mockCtor,
60+
mockProps
61+
);
4462
expect(createHash).toHaveBeenCalledWith('sha256');
4563
});
4664
});

‎packages/@lwc/jest-ssr-snaphot-utils/src/ssr-snapshot-utils.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ const { renderComponent: lwcRenderComponent } = require('@lwc/engine-server');
22
const { createHash } = require('crypto');
33
const { readdirSync, readFileSync } = require('fs');
44
const { join, dirname, basename, extname } = require('path');
5+
const { serverSideRenderComponent } = require('@lwc/ssr-runtime');
56

67
/**
78
* Renders the component's markup, captures it in a snapshot that has a unique snapshot hash.
@@ -12,9 +13,14 @@ const { join, dirname, basename, extname } = require('path');
1213
* @param {Object} [customTestEnv={}] - An object representing the custom test env where the component is being validated.
1314
* @returns {{renderedComponent: string, snapshotHash: string}} - An object containing the rendered markup and the generated snapshot hash.
1415
*/
15-
function renderAndHashComponent(tagName, Ctor, props = {}, customTestEnv = {}) {
16-
const renderedComponent = lwcRenderComponent(tagName, Ctor, props);
16+
async function renderAndHashComponent(tagName, Ctor, props = {}, customTestEnv = {}) {
1717
const snapshotHash = generateSnapshotHash(tagName, props, customTestEnv);
18+
const ssrMode = process.env.LWC_SSR_MODE || 'v2';
19+
20+
const renderedComponent =
21+
ssrMode !== 'v1'
22+
? await serverSideRenderComponent(tagName, Ctor, props)
23+
: lwcRenderComponent(tagName, Ctor, props);
1824

1925
return { renderedComponent, snapshotHash };
2026
}

‎packages/@lwc/jest-transformer/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,7 @@ Update your `jest` config to point the transformer to this package:
2626
}
2727
}
2828
```
29+
30+
### SSR Transformer
31+
32+
For SSR testing, use the new transformer `@lwc/jest-transformer/ssr`, which compiles components to generate the compiled artifact used for SSR rendering.

‎packages/@lwc/jest-transformer/package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,13 @@
1919
],
2020
"files": [
2121
"/src/index.js",
22+
"/src/ssr.js",
2223
"/src/transforms/*.js"
2324
],
25+
"exports": {
26+
".": "./src/index.js",
27+
"./ssr": "./src/ssr.js"
28+
},
2429
"dependencies": {
2530
"@babel/core": "^7.24.4",
2631
"@babel/plugin-proposal-dynamic-import": "^7.18.6",

0 commit comments

Comments
 (0)