How can I get Enzyme to recognize the action-html-attrs plugin?

Question

I use Jest to test my React components. I have included the included action-html-attrs plugin, which allows me to use classinstead className. This is configured using the properties of the Webpack module loader using:

{
  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'
    ],
  }
}

I want to use Enzyme to check the result of my components, to assert whether these attributes are correct class, but I get the following error:

console.error node_modules \ fbjs \ lib \ warning.js: 36
      Warning: Unknown DOM property class.
      Did you mean className?
        in h1
        in title

This is my test script:

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);
});

The header component is as follows:

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

... ( ):

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

  This is a test
</h1>

Enzyme , class action-html-attrs?

---

Update

render .html() , Enzyme class:

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

2

Jest package.json:

"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/"  ]
}

Answer 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'
}