Skip to content

refactor(jest): make jest presets version-specific #4904

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rwaskiewicz merged 1 commit into from
Oct 11, 2023
Merged

refactor(jest): make jest presets version-specific #4904

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 2 additions & 37 deletions scripts/bundles/helpers/jest/jest-preset.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,2 @@
/**
* The path's declared below are relative. Specifically, they are relative to the location of this file after
* compilation of the Stencil compiler has completed. See `scripts/bundles/testing` for the location of this file
* following compilation.
*/
const path = require('path');
const testingDir = __dirname;
const rootDir = path.join(testingDir, '..');
const internalDir = path.join(rootDir, 'internal');

// NOTE: if you change this, also change compiler/transpile.ts
const moduleExtensions = ['ts', 'tsx', 'js', 'mjs', 'jsx'];
const moduleExtensionRegexp = '(' + moduleExtensions.join('|') + ')';

module.exports = {
moduleFileExtensions: [...moduleExtensions, 'json', 'd.ts'],
moduleNameMapper: {
'^@stencil/core/cli$': path.join(rootDir, 'cli', 'index.js'),
'^@stencil/core/compiler$': path.join(rootDir, 'compiler', 'stencil.js'),
'^@stencil/core/internal$': path.join(internalDir, 'testing', 'index.js'),
'^@stencil/core/internal/app-data$': path.join(internalDir, 'app-data', 'index.cjs'),
'^@stencil/core/internal/app-globals$': path.join(internalDir, 'app-globals', 'index.js'),
'^@stencil/core/internal/testing$': path.join(internalDir, 'testing', 'index.js'),
'^@stencil/core/mock-doc$': path.join(rootDir, 'mock-doc', 'index.cjs'),
'^@stencil/core/sys$': path.join(rootDir, 'sys', 'node', 'index.js'),
'^@stencil/core/testing$': path.join(testingDir, 'index.js'),
'^@stencil/core$': path.join(internalDir, 'testing', 'index.js'),
},
setupFilesAfterEnv: [path.join(testingDir, 'jest-setuptestframework.js')],
testEnvironment: path.join(testingDir, 'jest-environment.js'),
testPathIgnorePatterns: ['/.cache', '/.stencil', '/.vscode', '/dist', '/node_modules', '/www'],
testRegex: '(/__tests__/.*|\\.?(test|spec))\\.' + moduleExtensionRegexp + '$',
transform: {
'^.+\\.(ts|tsx|jsx|css|mjs)$': path.join(testingDir, 'jest-preprocessor.js'),
},
watchPathIgnorePatterns: ['^.+\\.d\\.ts$'],
};
const { getJestPreset } = require('./index.js');
module.exports = getJestPreset();
3 changes: 2 additions & 1 deletion src/compiler/transpile.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,5 +167,6 @@ const transpileJson = (results: TranspileResults) => {
results.map = { mappings: '' };
};

// NOTE: if you change this, also change scripts/bundles/helpers/jest/jest-preset.js
// NOTE: if you change this, also change jest configuration files in `src/testing/jest/jest*`.
// Search for 'mod_extensions_jest' to find comments like this.
const shouldTranspileModule = (ext: string) => ['tsx', 'ts', 'mjs', 'jsx', 'js'].includes(ext);
1 change: 1 addition & 0 deletions src/testing/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ export {
getCreateJestPuppeteerEnvironment,
getCreateJestTestRunner,
getJestPreprocessor,
getJestPreset,
getJestSetupTestFramework,
} from './jest/jest-stencil-connector';
export {
Expand Down
5 changes: 5 additions & 0 deletions src/testing/jest/jest-27-and-under/jest-facade.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { JestFacade } from '../jest-facade';
import { createJestPuppeteerEnvironment as createJestPuppeteerEnvironment27 } from './jest-environment';
import { jestPreprocessor as jestPreprocessor27 } from './jest-preprocessor';
import { preset as jestPreset27 } from './jest-preset';
import { createTestRunner as createTestRunner27 } from './jest-runner';
import { runJest as runJest27 } from './jest-runner';
import { runJestScreenshot as runJestScreenshot27 } from './jest-screenshot';
Expand Down Expand Up @@ -37,4 +38,8 @@ export class Jest27Stencil implements JestFacade {
getJestSetupTestFramework() {
return jestSetupTestFramework27;
}

getJestPreset() {
return jestPreset27;
}
}
41 changes: 41 additions & 0 deletions src/testing/jest/jest-27-and-under/jest-preset.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import type { Config } from '@jest/types';
import { join } from 'path';

/**
* The path's declared below are relative. Specifically, they are relative to the location of this file after
* compilation of the Stencil compiler has completed.
*/
const testingDir = __dirname;
const rootDir = join(testingDir, '..');
const internalDir = join(rootDir, 'internal');

// NOTE: if you change this, also change compiler/transpile.ts. Search for 'mod_extensions_jest' to find other comments
// like it.
const moduleExtensions = ['ts', 'tsx', 'js', 'mjs', 'jsx'];
const moduleExtensionRegexp = '(' + moduleExtensions.join('|') + ')';

const preset: Config.InitialOptions = {
Copy link
Contributor

@tanner-reits tanner-reits Oct 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we use the JestConfig type you made?

Copy link
Member Author

@rwaskiewicz rwaskiewicz Oct 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The JestConfig type is actually going to be changing in the near-ish future when we add support for v28+ to be wider than just the typings of Jest 27. By using Config.InitialOptions here, we guarantee that this preset adheres to Jest 27's configuration shape, rather than one that (will) be a combination of 27 + 28 + 29

moduleFileExtensions: [...moduleExtensions, 'json', 'd.ts'],
moduleNameMapper: {
'^@stencil/core/cli$': join(rootDir, 'cli', 'index.js'),
'^@stencil/core/compiler$': join(rootDir, 'compiler', 'stencil.js'),
'^@stencil/core/internal$': join(internalDir, 'testing', 'index.js'),
'^@stencil/core/internal/app-data$': join(internalDir, 'app-data', 'index.cjs'),
'^@stencil/core/internal/app-globals$': join(internalDir, 'app-globals', 'index.js'),
'^@stencil/core/internal/testing$': join(internalDir, 'testing', 'index.js'),
'^@stencil/core/mock-doc$': join(rootDir, 'mock-doc', 'index.cjs'),
'^@stencil/core/sys$': join(rootDir, 'sys', 'node', 'index.js'),
'^@stencil/core/testing$': join(testingDir, 'index.js'),
'^@stencil/core$': join(internalDir, 'testing', 'index.js'),
},
setupFilesAfterEnv: [join(testingDir, 'jest-setuptestframework.js')],
testEnvironment: join(testingDir, 'jest-environment.js'),
testPathIgnorePatterns: ['/.cache', '/.stencil', '/.vscode', '/dist', '/node_modules', '/www'],
testRegex: '(/__tests__/.*|\\.?(test|spec))\\.' + moduleExtensionRegexp + '$',
transform: {
'^.+\\.(ts|tsx|jsx|css|mjs)$': join(testingDir, 'jest-preprocessor.js'),
},
watchPathIgnorePatterns: ['^.+\\.d\\.ts$'],
};

export { preset };
3 changes: 3 additions & 0 deletions src/testing/jest/jest-apis.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
* file be added to sparingly.
*/

import type { Config } from '@jest/types';
import { getVersion } from 'jest';

// TODO(STENCIL-959): Improve this typing by narrowing it
Expand All @@ -38,6 +39,8 @@ export type JestPreprocessor = {
// TODO(STENCIL-960): Improve this typing by narrowing it
export type JestTestRunner = any;

export type JestConfig = Config.InitialOptions;

/**
* Get the current major version of Jest that Stencil reconciles
*
Expand Down
12 changes: 11 additions & 1 deletion src/testing/jest/jest-facade.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { JestPreprocessor, JestPuppeteerEnvironment, JestTestRunner } from './jest-apis';
import { JestConfig, JestPreprocessor, JestPuppeteerEnvironment, JestTestRunner } from './jest-apis';

/**
* Interface for Jest-version specific code implementations that interact with Stencil.
Expand Down Expand Up @@ -71,4 +71,14 @@ export interface JestFacade {
* @returns a function that runs a setup configuration between tests.
*/
getJestSetupTestFramework(): () => void;

/**
* Retrieve the Jest preset configuration object for configuring tests.
*
* The value returned by said function is expected to be used in a
* [preset](https://jestjs.io/docs/configuration#preset-string) context.
*
* @returns the Jest preset object to be used for a particular version of Jest.
*/
getJestPreset(): JestConfig;
}
9 changes: 9 additions & 0 deletions src/testing/jest/jest-stencil-connector.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,3 +112,12 @@ export const getCreateJestTestRunner = () => {
export const getJestSetupTestFramework = () => {
return getJestFacade().getJestSetupTestFramework();
};

/**
* Retrieve Stencil's Jest presets for the detected version of Jest
*
* @returns an object representing a Jest preset
*/
export const getJestPreset = () => {
return getJestFacade().getJestPreset();
};