开玩笑遇到了一个意外的令牌＆＃x2B; React Markdown

Question

我会遇到错误（我正在使用React TypeScript），

  ● Test suite failed to run

    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:

    export {uriTransformer} from './lib/uri-transformer.js'
    ^^^^^^

    SyntaxError: Unexpected token 'export'

       5 | const Markdown = ({ text, classStyle }: ITextMedia) => (
       6 |   <div className={`${classes.mediaParagraph} ${classStyle ?? ''}`}>
    >  7 |     <ReactMarkdown>{text}</ReactMarkdown>
         |                                             ^
       8 |   </div>
       9 | );
      10 | export default Markdown;

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (components/media/markdown/index.tsx:7:45)

我已经尝试将React Markdown添加到Transform Intrance忽略模式，但是它仍然不起作用

。

{
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
  moduleNameMapper: {
    'next/router': '<rootDir>/__mocks__/next/router.js',
    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
    '^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$': '<rootDir>/__mocks__/file-mock.js',
  },
  transform: {
    '^.+\\.(js|jsx)$': 'babel-jest'
  },
  transformIgnorePatterns: [
    'node_modules/(?!react-markdown/)'
  ]
}

尝试运行测试文件时，

{
    "presets": [
        "next/babel",
        "@babel/preset-env"
    ],
    "plugins": []
}

我是开玩笑的新手，所以我不确定我是否做错了什么

Answer 1

在jest.config文件中，您需要将以下内容添加到modulenamemapper属性：

“ react-markdown”：“＆lt; rootdir＆gt;/node_modules/react -markdown/react-markdown.min.js“

如此有效，您的modulenamemapper应该看起来像这样：

  ...
  moduleNameMapper: {
    'next/router': '<rootDir>/__mocks__/next/router.js',
    '^.+\\.module\\.(css|sass|scss)
好运！
: 'identity-obj-proxy',
    '^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)
好运！
: '<rootDir>/__mocks__/file-mock.js',
    'react-markdown': '<rootDir>/node_modules/react-markdown/react-markdown.min.js',
  },
  ...

好运！

Answer 2

The following fix in jest.config.js no longer works from version 9.0.0 as they 删除束步。

  ...
  moduleNameMapper: {
    'react-markdown': '<rootDir>/node_modules/react-markdown/react-markdown.min.js',
  },
  ...

Answer 3

仅当您希望忽略错误时，我建议使用此解决方案。

在相关文件夹中创建一个空的模拟文件 - （ empty -mock.ts ）

const EmptyMock = {};

export default EmptyMock;

，并将其映射到要忽略的导入模块 -

const customJestConfig = {
  moduleNameMapper: {
    //imports to be ignored by jest
    "react-markdown": "<rootDir>/mock/empty-mock.ts",
    "remark-gfm": "<rootDir>/mock/empty-mock.ts",
  },
};

Answer 4

您不仅需要将React-Markdown添加到transformignorepatterns，而且还需要所有纯ESM的依赖项。

运行测试时，您可以在笑话中看到一个依赖项。记住React-Markdown node_modules中的大约。

Details:

/{...}/node_modules/react-markdown/node_modules/comma-separated-tokens/index.js:23

在transformignorepatterns中逐个添加一一并再次运行测试以获取下一个错误。

您必须添加React-MarkDown，逗号分隔t-tokens等。它将取决于您使用的react-markdown版本。就我而言，是：

"transformIgnorePatterns": [
  "/node_modules/(?!comma-separated-tokens|space-separated-tokens|hast-util-whitespace|property-information|trim-lines|remark-rehype|remark-parse|trough|is-plain-obj|bail|unified|vfile|react-markdown)"
]

Answer 5

我在环境中也有同样的问题。我们在monorepo中使用nx，并使用pnpm管理包裹。由于pnpm默认情况下缓存模块，因此它不适用于＆lt; rootdir＆gt;/node_modules/。但是，您也可以在没有此路径的情况下进行，然后它也可以与pnpm一起使用（jest在其文档中还提到＆lt; rootdir＆gt; < /代码>是可选的）：

…
moduleNameMapper: {
  'react-markdown': 'react-markdown/react-markdown.min.js',
},
…

Answer 6

当使用React-Markdown v9.0.1时，我也遇到了这一点。在我开始扩展Fernanda Duarte的答案之前，似乎没有任何配置能做到这一点。

似乎由于该模块的新ESM格式，Jest确实有麻烦。我正在使用开玩笑，ESM，打字稿，babel-jest，React以及本文截至本文的其他任何最新模块。

这是我想到的（下），这允许测试干净地进行。您必须设置transformignorepatterns，不仅忽略react-markdown，还忽略其所有依赖性，并在React-Markdown更新自己的依赖关系时进行更新。因此，我已经将它们全部编译成一个阵列，该数组已连接并插入正则ggex，以忽略模式以使其易于阅读。

您不需要使用modulenamemapper或类似的东西使用React-Markdown React-Markdown 。而且，不要费心尝试重新映射react-markdown/react-markdown.min.js，因为v9.x不再包括CommonJS后备。

const esModules = [
  /** react-markdown 9.0.1 */
  'react-markdown',
  'bail',
  'comma-separated-tokens',
  'decode-named-character-reference',
  'devlop/lib/default',
  'estree-util-is-identifier-name',
  'hast-util-.*',
  'html-url-attributes',
  'is-plain-obj',
  'mdast-util-.*',
  'micromark.*',
  'property-information',
  'remark-.*',
  'space-separated-tokens',
  'trim-lines',
  'trough',
  'unified',
  'unist-.*',
  'vfile-message',
  /** react-markdown 8.0.3 */
  'vfile',
].join('|')

// In the config:
{
  ...
  transformIgnorePatterns: [
    // Enable babel transforms for these specific packages. They ship code as es
    // modules only, and must be transpiled in order to run on Node.
    `[/\\\\]node_modules[/\\\\](?!${esModules}).+\\.(js|jsx|mjs|cjs|ts|tsx)
当使用 React-Markdown  v9.0.1时，我也遇到了这一点。在我开始扩展Fernanda Duarte的答案之前，似乎没有任何配置能做到这一点。
似乎由于该模块的新ESM格式，Jest确实有麻烦。我正在使用开玩笑，ESM，打字稿，babel-jest，React以及本文截至本文的其他任何最新模块。
这是我想到的（下），这允许测试干净地进行。您必须设置 transformignorepatterns ，不仅忽略 react-markdown ，还忽略其所有依赖性，并在React-Markdown更新自己的依赖关系时进行更新。因此，我已经将它们全部编译成一个阵列，该数组已连接并插入正则ggex，以忽略模式以使其易于阅读。
 您不需要使用 modulenamemapper 或类似的东西使用React-Markdown  React-Markdown 。而且，不要费心尝试重新映射 react-markdown/react-markdown.min.js ，因为v9.x不再包括CommonJS后备。
,
  ],
  ...
}

Answer 7

为了在v9+中解决此问题，我们创建了一个模拟，该模拟仍然使我们能够验证传递给reactmarkdown的内容已渲染到屏幕上（注意：示例代码在Typescript中）。

import { ReactNode } from "react";

interface ChildrenProps {
    children: ReactNode;
}

function ReactMarkdownMock({ children }: ChildrenProps) {
    return <p>{children}</p>;
}

export default ReactMarkdownMock;

然后在jest.config.js中注册。

…
moduleNameMapper: {
  'react-markdown': '"<rootDir>/mock/ReactMarkdownMock.tsx',
},
…

Answer 8

对于@uiw/react-markdown-preview 插件，我也有同样的问题。

我唯一可以做的只会在 modulenamemapper 内部添加它。

"react-markdown-preview": "<rootDir>/node_modules/@uiw/react-markdown-preview/dist/markdown.min.js"

Answer 9

它在代码中是一个简单的修复程序，只需将导入语句

import ReactMarkdown from 'react-markdown';

从

import ReactMarkdown from 'react-markdown/react-markdown.min';