时间戳

首页 > 解决方案 > React Jest Enzyme - 导入降价时测试失败

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

问题描述

当我尝试运行我的测试时，他们在我的课堂上失败了，他试图导入我的降价文件：

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';

我搜索了很多错误，但从未发现过降价。

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

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

标签： reactjsmarkdownjestjsenzyme

解决方案

我在我的笑话配置中找到了解决方案，方法是添加到 extensions 和 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"
  ]
};

推荐阅读