如何让 Enzyme 识别 react-html-attrs 插件？答案

【问题标题】：How can I get Enzyme to recognise the react-html-attrs plugin?如何让 Enzyme 识别 react-html-attrs 插件？
【发布时间】：2017-05-04 12:51:14
【问题描述】：

我正在使用 Jest 来测试我的 React 组件。我启用了 react-html-attrs 插件，允许我使用 class 而不是 className。这是通过 Webpack 的模块加载器属性配置的：

{
  test: /\.js$/,
  exclude: /node_modeules|bower_components/,
  loader: 'babel-loader',
  query: {
    presets: ['react', 'es2015', 'stage-0'],
    plugins: [
      'react-html-attrs',
      'transform-decorators-legacy',
      'transform-class-properties',
      'babel-polyfill'
    ],
  }
}

我想使用 Enzyme 测试我的组件的渲染结果，以断言这些 class 属性是否正确提供，但我收到以下错误：

console.error node_modules\fbjs\lib\warning.js:36
警告：未知的 DOM 属性类。
您是说类名吗？
在 h1
在标题中

这是我的测试脚本：

it('loads the correct icon', () => {
  const render = shallow(
    <Heading icon="fa-question" text="This is a test" />
  );

  const el = render.find('i');

  expect(el.hasClass('fa-question')).toBe(true);
});

标题组件本身是这样的：

return (
  <h1 class="heading">
    {icon ? <i class={"fa " + icon}></i> : ""} {text}
  </h1>
)

...输出（通过 react-test-renderer 快照查看）是：

<h1
  class="heading">
  <i
    class="fa fa-question" />

  This is a test
</h1>

如何让 Enzyme 在启用 react-html-attrs 的情况下识别 class 有效？

更新

在记录render.html() 时，我可以看到 Enzyme 完全忽略了 class 属性：

console.info src\js\components__tests__\Heading.js:40
<h1><i></i> This is a test</h1>

更新 2

这是我在 package.json 中的 Jest 配置：

"jest": {
  "modulePaths": [
    "./src/js"
  ],
  "moduleFileExtensions": [
    "js"
  ],
  "moduleDirectories": [
    "node_modules",
    "bower_components",
    "shared"
  ],
  "moduleNameMapper": {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
    "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
  },
  "unmockedModulePathPatterns": [
    "node_modules/react/",
    "node_modules/enzyme/"
  ]
}

【问题讨论】：

在运行测试之前你是否使用了相同配置的 webpack？
@DavinTryon 我不太确定你的意思。我已将我的 Jest 配置添加到问题中。
我想我是在问测试如何知道你的 webpack 配置 :) 我不使用 Jest，但该配置可能对使用的人有用。
很酷，所以在.babelrc 中，你也可以有一个"plugins" 数组。我会尝试将你在 webpack 配置中的插件列表添加到 .babelrc 中，看看 Jest 是否会选择它们。应该管用。也许先尝试添加react-html-attrs。
顺便说一句，如果 webpack.config.js 中没有给出配置，webpack babel-loader 将从 .babelrc 中获取。所以，你只需要一次配置。

标签： reactjs webpack jestjs enzyme

【解决方案1】：

由于 Jest 不使用 webpack 配置，因此您需要将 babel 配置添加到它将读取的源中。 .babelrc 文件是一个很好的地方，因为 webpack 也会在那里寻找 babel-loader 的配置。

因此，将其添加到您的 .bablerc 应该会有所帮助：

{
    "presets": [
        "es2015",
        "react",
        "stage-0"
    ],
    "plugins": [
        "react-html-attrs",
        "transform-decorators-legacy",
        "transform-class-properties",
        "babel-polyfill"
    ]
}

然后，你也可以清理你的 webpack 配置：

{
  test: /\.js$/,
  exclude: /node_modeules|bower_components/,
  loader: 'babel'
}

【讨论】：