Jest遇到了一个意外的标记+React Markdown。

21
我试图运行我的测试文件时遇到了错误(我正在使用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添加到转换忽略模式中,但它仍然不起作用。这是我的jest.config文件。
{
  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/)'
  ]
}

我的 Babel 配置:

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

我刚开始使用Jest,不确定是否做错了什么

5个回答

40

jest.config文件中,您需要向moduleNameMapper属性添加以下内容:

"react-markdown": "<rootDir>/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',
  },
  ...

祝你好运!


谢谢,那对我有用。您能解释一下为什么需要这个步骤吗? - Anne
1
嗨 @Anne,moduleNameMapper 的目的基本上是为了测试而存根资源。但有时它也可以用来帮助 Jest 找到正确的模块来运行测试。在 react-markdown 的情况下,它只需要一点帮助来指向正确的目录以运行正确的文件进行测试。希望这可以帮到你。 - poweratom

2

你需要将不仅是react-markdown,还有它所有的纯ESM依赖项添加到transformIgnorePatterns中。

在运行测试时,你可以在jest错误中逐个查看这些依赖项。记得要注意react-markdown node_modules内部的依赖项。

Details:

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

transformIgnorePatterns中逐一添加并重新运行测试以获取下一个错误。

您必须添加react-markdowncomma-separated-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)"
]

1

这是一个简单的代码修复,只需要更改导入语句:

import ReactMarkdown from 'react-markdown';

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

1
我在我的环境中遇到了同样的问题。我们在一个单体库中使用nx,并使用pnpm管理我们的包。由于pnpm默认缓存模块,它与/node_modules/不兼容。然而,你也可以不使用这个路径,然后它也可以与pnpm一起工作(jest在文档中也提到使用是可选的)。
moduleNameMapper: {
  'react-markdown': 'react-markdown/react-markdown.min.js',
},
…

非常感谢,我已经尽力尝试了好几个小时。这是对我来说正确的前进方向。我通过第三方包含了react-markdown。 - undefined

0
我对@uiw/react-markdown-preview插件有同样的问题。
我唯一能做的就是在package.json中的moduleNameMapper下添加这个。
"react-markdown-preview": "<rootDir>/node_modules/@uiw/react-markdown-preview/dist/markdown.min.js"

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接