ci: jest ts jest compatibility#2247
Conversation
ts-jest 27.x only supports Jest 27.x, but we're using Jest 29.x. This version mismatch caused test failures with the error: "process() or/and processAsync() method of code transformer..." Updated to ts-jest ^29.1.1 to match @faustwp/cli.
ts-jest deprecated the globals config in favor of transform options.
Updated all jest.config.js files to use the new syntax:
Before:
globals: { 'ts-jest': { useESM: true } }
After:
transform: { '^.+\\.tsx?$': ['ts-jest', { useESM: true }] }
Coverage collection via babel-plugin-istanbul has compatibility issues with Node.js 22 due to deprecated util.promisify usage in test-exclude. Disabling collectCoverage by default allows tests to run successfully. Coverage is still collected when explicitly requested via test:coverage:ci scripts.
Add coverage directory to .eslintignore to prevent prettier format checks from failing on generated coverage report files. - Create packages/faustwp-cli/.eslintignore with dist, node_modules, coverage - Update packages/faustwp-core/.eslintignore to include coverage
…ests toMatchInlineSnapshot() with expected content is not supported in newer Jest/Babel versions. Replace with toEqual() using explicit array comparisons for toolbar node content validation.
fast-xml-parser 5.x changed XML quote escaping behavior, outputting unescaped quotes instead of escaped entities. Update test snapshots to match the new output format.
Regenerate lockfile after updating ts-jest dependency to ensure correct versions are locked.
|
The previous lockfile was missing dependencies that npm ci requires: - glob@11.1.0, glob@10.5.0 - jackspeak@4.1.1, jackspeak@3.4.3 - minimatch@10.1.1, minimatch@9.0.5 - path-scurry@2.0.1, path-scurry@1.11.1 - @isaacs/brace-expansion@5.0.0, brace-expansion@2.0.2 - @isaacs/balanced-match@4.0.1 - lru-cache@11.2.5, lru-cache@10.4.3 This caused CI to fail with: "npm ci can only install packages when your package.json and package-lock.json are in sync"
The glob overrides in root and faustwp-core package.json were forcing glob to v10.5.0, but faustwp-cli explicitly requires glob v11.1.0. This created an unresolvable conflict causing npm ci to fail with: "Missing: glob@11.1.0 from lock file" Remove the glob overrides and regenerate package-lock.json to allow npm to resolve glob versions naturally for each package.
📦 Next.js Bundle Analysis for @faustwp/getting-started-exampleThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
268.33 KB (🟡 +1.96 KB) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
One Page Changed Size
The following page changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load | % of Budget (350 KB) |
|---|---|---|---|
/example |
807 B |
269.11 KB | 76.89% (+/- <0.01%) |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.
The test for useBlocksTheme throwing when used outside provider was logging expected React errors to console.error, which caused CI to exit with code 1 even though all tests passed.
The test expected console.log to be called with the full error message as a single argument, but errorLog() passes the message prefix and details as separate arguments.
…m/wpengine/faustjs into fix/ci-jest-ts-jest-compatibility
The Wait for db step used $MYSQL_ROOT_PASSWORD which was never defined, causing intermittent test failures. Use docker compose exec to connect directly to the container instead of from the host. Bug introduced in 6e5ef28 (May 2024).
MySQL 8.4+ has stricter SSL requirements causing "self-signed certificate" errors in CI. Pin to MySQL 8.0 and use mysql_native_password authentication to ensure compatibility with the WordPress test containers. Also removes deprecated docker-compose version attribute.
Add --ssl-mode=DISABLED to mysql/mysqladmin commands in install-wp-tests.sh to prevent SSL certificate verification errors in CI environment.
Add --skip-ssl to mysql/mysqladmin commands in install-wp-tests.sh to prevent SSL certificate verification errors in CI environment. Note: Using --skip-ssl instead of --ssl-mode=DISABLED for compatibility with MariaDB client (default-mysql-client) in WordPress containers.
The test-exclude@6.0.0 package uses util.promisify in a way that's incompatible with Node.js 22, causing coverage collection to fail with "TypeError: The 'original' argument must be of type function". This adds an npm override to force test-exclude@^7.0.1 which fixes the Node.js 22 compatibility issue.
Add Jest as a dev dependency for the faustwp-cli package and simplify the ts-jest transform config: replace the previous useESM object with an explicit tsconfig option (tsconfig.json). This ensures ts-jest uses the project TypeScript config and keeps the Jest setup concise.
Add useESM: true to the ts-jest transformer in packages/faustwp-cli/jest.config.js so TypeScript tests run in ESM mode. This ensures ts-jest handles native ESM imports/exports properly while continuing to use the existing tsconfig.json.
Add a // @ts-expect-error before InnerBlocks.Content to silence incompatible React types across versions, and tighten TypeScript annotations in errorLoggingLink: specify the Observable observer shape and explicit types for next and error handlers (FetchResult / unknown). These changes address TS type errors and improve type safety without altering runtime behavior.
- Add transformIgnorePatterns to faustwp-core and blocks Jest configs to transform @apollo/client, ts-invariant, tslib, and zen-observable-ts - Add ts-invariant as explicit devDependency in faustwp-core to fix missing transitive dependency issue This resolves Jest test failures on Node.js 22 where ESM modules from @apollo/client were not being transformed correctly during test runs.
Add explicit devDependencies for @apollo/client's transitive dependencies in faustwp-core. Due to npm workspace hoisting, the local @apollo/client (v3.14.0) cannot resolve its dependencies when they're hoisted to the root node_modules with different versions. Added dependencies: - @graphql-typed-document-node/core - @wry/caches, @wry/equality, @wry/trie - graphql-tag, hoist-non-react-statics - optimism, prop-types, rehackt - symbol-observable, tslib, zen-observable-ts This fixes "Cannot find module 'zen-observable-ts'" and similar errors that caused 10 faustwp-core and 3 blocks test suites to fail in CI.
…bility The jest-coverage-report-action's skip-step: install parameter was not working, causing npm install to run and override the locked dependencies. This resulted in test-exclude@6.0.0 being used with glob v11, which fails on Node 22 due to promisify incompatibility. This change: - Runs coverage tests manually using npm scripts (respects npm ci deps) - Uses coverage-file parameter to provide pre-generated reports - Upgrades action to v2.3.1 and uses skip-step: all
…bility The jest-coverage-report-action's skip-step: install parameter was not working, causing npm install to run and override the locked dependencies. This resulted in test-exclude@6.0.0 being used with glob v11, which fails on Node 22 due to promisify incompatibility. This change: - Runs coverage tests manually using npm scripts (respects npm ci deps) - Uses coverage-file parameter to provide pre-generated reports - Upgrades action to v2.3.1 and uses skip-step: all
…m/wpengine/faustjs into fix/ci-jest-ts-jest-compatibility # Conflicts: # .github/actions/run-coverage/action.yml
|
Thanks @josephfusco, looks great 🚀 |
|
Thank you for your help @ahuseyn! |
2 participants
This pull request introduces several improvements to testing infrastructure, dependency management, and code consistency across the monorepo. The main changes include updating Jest configurations for better ESM support, refining coverage reporting workflows, and cleaning up test code for clarity and reliability.
Testing and Coverage Workflow Improvements
.github/actions/run-coverage/action.ymlto run coverage tests manually usingnpm run test:coverage:cifor better dependency handling and to use the coverage report action only for report generation, addressing Node 22 compatibility issues.block-editor-utils,blocks,faustwp-cli,faustwp-core) to disable coverage collection by default, switch to the V8 coverage provider, and improve ESM support by updatingts-jestsettings and addingtransformIgnorePatternsfor ESM dependencies. [1] [2] [3] [4] [5] [6] [7]coverageto.eslintignorefiles in relevant packages to prevent linting of coverage output. [1] [2]Dependency Management
package.jsonfiles to add or upgrade dependencies required for ESM support and Apollo integration, includingts-jest,jest,@graphql-typed-document-node/core,@wry/caches,@wry/equality,@wry/trie,graphql-tag,hoist-non-react-statics,optimism,prop-types,rehackt,symbol-observable,ts-invariant,tslib, andzen-observable-ts. Also removed unnecessarygloboverrides and replacedglobwithtest-excludein one package. [1] [2] [3] [4] [5]Test Code Consistency and Reliability
Toolbar.test.tsxandwithFaust.test.tsto use direct array equality instead of inline snapshots, improving readability and reliability of test output. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]WordPressBlocksProvider.test.tsxto prevent noisy output during error handling tests.@ts-expect-errorcomment inSave.tsxto document and suppress a known type incompatibility withInnerBlocks.Contentacross React versions.Miscellaneous Improvements