如何用玩笑测试@mdx-js/mdx（transformIgnorePatterns不适用于“开发”模块）

Question

我的最终目标是能够在 Jest 中编写可以从

@mdx-js/mdx

（这是一个 ESM 模块）导入的测试，并且由于正在开发的库包是为 commonsjs 配置的，所以我使用

transform

和

我的 

jest.config.ts. 中的 transformIgnorePatterns

方法

/* eslint-disable */
import { readFileSync } from 'fs';
import type { Config } from 'jest';

// Reading the SWC compilation config and remove the "exclude"
// for the test files to be compiled by SWC
const { exclude: _, ...swcJestConfig } = JSON.parse(readFileSync(`${__dirname}/.swcrc`, 'utf-8'));

// disable .swcrc look-up by SWC core because we're passing in swcJestConfig ourselves.
// If we do not disable this, SWC Core will read .swcrc and won't transform our test files due to "exclude"
if (swcJestConfig.swcrc === undefined) {
  swcJestConfig.swcrc = false;
}

// Uncomment if using global setup/teardown files being transformed via swc
// https://nx.dev/packages/jest/documents/overview#global-setup/teardown-with-nx-libraries
// jest needs EsModule Interop to find the default exported setup/teardown functions
// swcJestConfig.module.noInterop = false;

export default {
  displayName: 'jest-mdx-transformer',
  preset: '../../jest.preset.js',
  transform: {
    '^.+\\.[tj]s$': ['@swc/jest', swcJestConfig],
  },
  transformIgnorePatterns: [
    '/node_modules/(?!(@mdx-js/mdx|develop|markdown-extensions|unist-util-stringify-position|vfile|vfile-message)/)',
  ],
  moduleFileExtensions: ['ts', 'js', 'json', 'mdx', 'html'],
  testEnvironment: 'node',
  coverageDirectory: '../../coverage/libs/jest-mdx-transformer',
} satisfies Config;

我的典型流程是继续扩展此正则表达式，直到 Jest 不再抱怨在 node_modules 中转换 ESM，这在我添加

develop

包之前一直运行良好。无论它是否存在都会产生相同的错误：

Jest encountered an unexpected token

Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

By default "node_modules" folder is ignored by transformers.

Here's what you can do:
 • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
 • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation

Details:

/workspace/perpetual-cabbage/node_modules/devlop/lib/default.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export function deprecate(fn) {
                                                                                  ^^^^^^

SyntaxError: Unexpected token 'export'

  3 | describe('watheia.cabbage/jest-mdx-transformer', () => {
  4 |   it('should render mdx in jest', async () => {
> 5 |     const result = await compile('# Hello, World!');
    |              ^
  6 |     expect(result).toBeDefined();
  7 |   });
  8 | });

  at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1505:14)
  at Object.<anonymous> (../../node_modules/@mdx-js/mdx/lib/core.js:136:17)
  at Object.<anonymous> (../../node_modules/@mdx-js/mdx/lib/compile.js:40:15)
  at Object.<anonymous> (../../node_modules/@mdx-js/mdx/index.js:46:18)
  at Object.<anonymous> (test/jest-mdx-transformer.spec.ts:5:14)

为什么它改变了我添加但没有开发的所有其他包？我不认为这有什么特别不同的地方。我希望它能像 RegExp 中的所有其他内容一样被转译。

虽然我想了解这里发生的情况，但我会接受任何可能的解决方法作为解决方案。

感谢您的宝贵时间！

Answer 1

我能够想出一个解决方法，但我会等待接受答案，因为它不可移植，并且不能解决 Jest 未能按预期转换包的根本问题。

由于我在 Nx monorepo 中工作，因此我能够创建一个简单的 wrapper 库 来从

@mdx-js/mdx

导出符号，然后使用 rollup 将该库捆绑为 ESM 和 CJS。接下来，更新使用库以从 dist 工件导入，Jest 将能够从那里获取完全转换的 CJS 模块。无需进一步改造。

// eslint-disable-next-line @nx/enforce-module-boundaries
import { compile } from '../../../dist/libs/mdx';

describe('compile', () => {
  it('should compile mdx content', async () => {
    const result = await compile('# Hello, World!');
    expect(result).toBeDefined();
  });
});

如果可能，请更新构建系统以在运行测试之前调用构建。对于 nx，您可以在

project.json

中设置 dependsOn 选项。