reactjs - React Jest Enzyme - 导入 Markdown 时测试失败

Question

当我尝试运行我的测试时，他们在我的类里面失败了，他试图导入我的 Markdown 文件:

import StartRecord from './Documentation/content/API/Start_record.md';
import UseLive from './Documentation/content/User/Live.md';
import UseRecord from './Documentation/content/User/Record.md';
import UseReplay from './Documentation/content/User/Replay.md';
import Settings from './Documentation/content/User/Settings.md';

这是我失败的消息:

FAIL  src/__test__/App.test.js
  ● Test suite failed to run

/Users/anyone/Desktop/web/src/Modules/Dashboard/Documentation/content/User/Live.md:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){# Interface
                                                                                         ^

SyntaxError: Invalid or unexpected token

   8 | // Content
   9 | import StartRecord from './Documentation/content/API/Start_record.md';
> 10 | import UseLive from './Documentation/content/User/Live.md';
     | ^
  11 | import UseRecord from './Documentation/content/User/Record.md';
  12 | import UseReplay from './Documentation/content/User/Replay.md';
  13 | import Settings from './Documentation/content/User/Settings.md';

我搜索了很多错误，但从未发现 Markdown 。

我使用 webpack 并且已经将其配置为读取 Markdown。 (它是 webconfig 文件的一部分)

{
        test: /\.md$/,
        include: /node_modules/,
        use: [
            {
                loader: "html-loader"
            },
            {
                loader: "markdown-loader"
            }
        ]
      }

Answer 1

我在我的 jest 配置中找到了解决方案，方法是在扩展和 moduleNameMapper 中添加 html和 md像那样:

module.exports = {
  moduleFileExtensions: ['js', 'jsx', 'json', 'png', 'md', 'html'],
  transform: {
    '^.+\\.(js|jsx)?$': 'babel-jest'
  },
  "moduleNameMapper": {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|md|html)$": "<rootDir>/assetsTransformer.js",
    "\\.(css|less)$": "<rootDir>/assetsTransformer.js"
  },
  "setupFiles": [
    "./configJSDom.js"
  ],
  "collectCoverage": true,
  "collectCoverageFrom": [
    "src/*.js",
    "src/*/*.js",
    "src/*/*/*.js",
    "!src/test.js",
    "!src/serviceWorker.js",
    "!src/index.js"
  ]
};