Skip to content

Commit 018b9de

Browse files
lesya7lesya7
authored
Jest snapshot-based approach for SSR testing (#292)
* Jest snapshot-based approach for SSR testing * Better name for a var * Fixing the format * Addressing comments * Continue addressing feedack * Continue addressing feedback * Update yarn.lock * Update yarn.lock * Update yarn.lock * Switching to the public NPM registry * Fixing the formatting issues * New SSR server and client presets * The name for the preset on SSR + hydration is changed * better readability for jsdom wrapper * Updated yarn.lock with the correct NPM registry url * Updated yarn.lock with the correct NPM registry url * Updated yarn.lock with the correct NPM registry url * Updated yarn.lock with the correct NPM registry url * fixing the format
1 parent e92349f commit 018b9de

File tree

69 files changed

+1843
-1584
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

69 files changed

+1843
-1584
lines changed

‎jest.config.js

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@ function unitTest({ nativeShadow }) {
88
return {
99
displayName: {
1010
name: `unit (${nativeShadow ? 'native' : 'synthetic'} shadow)`,
11-
color: nativeShadow ? 'blue' : 'cyan'
11+
color: nativeShadow ? 'blue' : 'cyan',
1212
},
1313

1414
rootDir: '<rootDir>/packages',
1515
testMatch: ['**/__tests__/**/?(*.)(test).js'],
1616

1717
globals: {
1818
'lwc-jest': {
19-
nativeShadow
20-
}
19+
nativeShadow,
20+
},
2121
},
2222
};
2323
}
@@ -26,20 +26,20 @@ function integration({ nativeShadow }) {
2626
return {
2727
displayName: {
2828
name: `integration (${nativeShadow ? 'native' : 'synthetic'} shadow)`,
29-
color: nativeShadow ? 'blue' : 'cyan'
29+
color: nativeShadow ? 'blue' : 'cyan',
3030
},
3131

3232
rootDir: '<rootDir>/test',
33-
preset: '@lwc/jest-preset',
33+
preset: '@lwc/jest-preset/ssr-for-hydration',
3434
moduleNameMapper: {
3535
'^smoke/(.+)$': '<rootDir>/src/modules/smoke/$1/$1',
36-
"^(components)/(.+)$": "<rootDir>/src/modules/$1/$2/$2"
36+
'^(components)/(.+)$': '<rootDir>/src/modules/$1/$2/$2',
3737
},
3838

3939
globals: {
4040
'lwc-jest': {
41-
nativeShadow
42-
}
41+
nativeShadow,
42+
},
4343
},
4444
};
4545
}
@@ -53,14 +53,14 @@ module.exports = {
5353
{
5454
displayName: {
5555
name: `integration (ssr)`,
56-
color: 'magenta'
56+
color: 'magenta',
5757
},
5858

5959
rootDir: '<rootDir>/test',
60-
preset: '@lwc/jest-preset/ssr',
60+
preset: '@lwc/jest-preset/ssr-server',
6161
moduleNameMapper: {
6262
'^ssr/(.+)$': '<rootDir>/src/modules/ssr/$1/$1',
6363
},
64-
}
64+
},
6565
],
6666
};

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,10 @@
3131
"husky": "^9.0.11",
3232
"jest": "^29.7.0",
3333
"jest-environment-jsdom": "^29.7.0",
34+
"jest-serializer-html": "7.1.0",
3435
"lerna": "^8.1.2",
3536
"lint-staged": "^15.2.2",
36-
"prettier": "^3.2.5",
37+
"prettier": "^2.0.0",
3738
"semver": "^7.6.0"
3839
},
3940
"lint-staged": {

‎packages/@lwc/jest-jsdom-test-env/README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## @lwc/jest-jsdom-test-env
2+
3+
Custom test environment for JSDOM.

‎packages/@lwc/jest-jsdom-test-env/package.json

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "@lwc/jest-jsdom-test-env",
3+
"version": "16.1.0",
4+
"description": "Jest custom test environment for JSDOM",
5+
"homepage": "https://lwc.dev/",
6+
"repository": {
7+
"type": "git",
8+
"url": "https://github.com/salesforce/lwc-test.git",
9+
"directory": "packages/@lwc/jest-jsdom-test-env"
10+
},
11+
"bugs": {
12+
"url": "https://github.com/salesforce/lwc-test/issues"
13+
},
14+
"license": "MIT",
15+
"main": "src/jsdom-test-env.js",
16+
"peerDependencies": {
17+
"jest": "^26 || ^27 || ^28 || ^29",
18+
"jest-environment-jsdom": "^28 || ^29"
19+
},
20+
"engines": {
21+
"node": ">=10"
22+
}
23+
}

‎packages/@lwc/jest-jsdom-test-env/src/__tests__/jsdom-test-env.test.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* @jest-environment @lwc/jest-jsdom-test-env
3+
*/
4+
5+
const path = require('path');
6+
7+
describe('JSDOM custom test environment', () => {
8+
it('should correctly set the absolute path of the test file in global.testFilePath', () => {
9+
const expectedPath = path.resolve(__filename);
10+
expect(global.testFilePath).toBe(expectedPath);
11+
});
12+
});

‎packages/@lwc/jest-jsdom-test-env/src/jsdom-test-env.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
const JSDOMEnvironment = require('jest-environment-jsdom').TestEnvironment;
2+
3+
/**
4+
* Custom Jest environment extending JSDOM.
5+
*/
6+
class CustomJSDOMEnvironment extends JSDOMEnvironment {
7+
/**
8+
* Initializes the custom environment.
9+
*
10+
* @param {object} config - Jest configuration.
11+
* @param {object} context - Test context including file path.
12+
*/
13+
constructor(config, context) {
14+
super(config, context);
15+
this.testPath = context.testPath;
16+
}
17+
18+
/**
19+
* Sets up the environment, including the test file path.
20+
*/
21+
async setup() {
22+
await super.setup();
23+
this.global.testFilePath = this.testPath;
24+
}
25+
26+
/**
27+
* Cleans up the environment.
28+
*/
29+
async teardown() {
30+
await super.teardown();
31+
}
32+
}
33+
34+
module.exports = CustomJSDOMEnvironment;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ jest.mock(
132132
() => ({
133133
default: jest.fn(),
134134
}),
135-
{ virtual: true },
135+
{ virtual: true }
136136
);
137137

138138
it('test apex callout', async () => {

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"jest": "^28 || ^29"
3232
},
3333
"dependencies": {
34+
"@lwc/jest-jsdom-test-env": "16.1.0",
3435
"@lwc/jest-resolver": "16.1.0",
3536
"@lwc/jest-serializer": "16.1.0",
3637
"@lwc/jest-transformer": "16.1.0"

‎packages/@lwc/jest-preset/src/setup.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ if (!nativeShadow) {
1212
.includes('function patchedAddEventListener')
1313
) {
1414
throw new Error(
15-
'@lwc/synthetic-shadow is being loaded twice. Please examine your jest/jsdom configuration.',
15+
'@lwc/synthetic-shadow is being loaded twice. Please examine your jest/jsdom configuration.'
1616
);
1717
}
1818
require('@lwc/synthetic-shadow');

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/*
2+
* Copyright (c) 2018, salesforce.com, inc.
3+
* All rights reserved.
4+
* SPDX-License-Identifier: MIT
5+
* For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
6+
*/
7+
const originalCSRPreset = require('../jest-preset.js');
8+
9+
module.exports = {
10+
...originalCSRPreset,
11+
testEnvironment: require.resolve('@lwc/jest-jsdom-test-env'),
12+
};

0 commit comments

Comments
 (0)