Jest 测试失败：应该对所有 React 组件使用 Material-UI

Question

我正在使用 React 开发一个项目，我使用 Material-UI 只是为了包含表单的组件。当我运行测试时，带有表单的组件（使用 material UI）成功通过，但问题在于其中没有表单的组件，因此它没有使用任何 material ui 个组件，测试失败！

当我运行测试时，它没有通过这些组件并显示：

  ● Natural

    Material-UI: expected an Element but found null. Please check your console for additional warnings and try fixing those. If the error persists please file an issue.

       5 | 
       6 | test('Natural', () => {
    >  7 |   const story = renderer.create(<BrowserRouter> <Story /> </BrowserRouter>).toJSON();
         |                          ^
       8 |   expect(story).toMatchSnapshot();
       9 | });
      10 |

这是我的测试代码：

import React from 'react';
import renderer from 'react-test-renderer';
import { BrowserRouter } from 'react-router-dom';
import Story from './index';

test('Natural', () => {
  const story = renderer.create(<BrowserRouter> <Story /> </BrowserRouter>).toJSON();
  expect(story).toMatchSnapshot();
});

这是我的组件代码：

import React, { Fragment } from 'react';
import Footer from '../Common/Footer';

const Story = () => {
  return (
    <Fragment>
      <main>
        <h1>Hello Story page!</h1>
      </main>
      <Footer />
    </Fragment>
  );
};

export default Story;

期待考试通过！

Answer 1

问题出在 Material UI 包的版本上。我使用的是 v4.0.0-beta.2，但现在我已将其更新为 v4.0.0-rc.0，这解决了问题并且所有测试都通过了。

另一个注意事项，我在我的 Footer 组件上使用了 material ui。所以这个问题会显示在我用MaterialUI组件的组件上就可以了。

编辑：

新版本发布：v4.0.1

Jest 测试失败：应该对所有 React 组件使用 Material-UI

Jest testing fails: Should use Material-UI for all react components

reactjs

jestjs

material-ui

react-component