如何使用 create-react-app 正确配置 material-ui 进行测试？

Question

我从网站的 material-ui 测试页面中做了一个例子。 我已经使用 create-react-app 制作了该应用程序，并将酶导入到我的项目中。

import { createMount } from '@material-ui/core/test-utils';
import MyComponent from './src/MyComponent';

describe('<MyComponent />', () => {
  let mount;

 before(() => {
   mount = createMount();
});

after(() => {
   mount.cleanUp();
});

it('should work', () => {
   const wrapper = mount(<MyComponent />);
 });
});

我所有的测试都无法运行，抛出以下错误ReferenceError: before is not defined

我读过的所有地方都说我不需要配置 jest，因为它是通过 create-react-app 开箱即用的。 下面是我的 package.json，我应该如何配置我的应用程序才能运行这些测试？

{
"name": "client",
"version": "1.3.0",
"private": true,
"license": "private",
"proxy": {
    "/media/*": {
        "target": "website"
    },
    "/updates/*": {
        "target": "website"
    },
    "/okta/*": {
        "target": "website"
    }
},
"homepage": "http:website",
"dependencies": {
    "@material-ui/core": "^1.5.1",
    "@material-ui/icons": "^2.0.3",
    "axios": "^0.17.1",
    "lodash": "^4.17.4",
    "material-ui-pickers": "^1.0.0-beta.12",
    "materialize-css": "^0.100.2",
    "moment": "^2.20.1",
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
    "react-addons-shallow-compare": "^15.6.2",
    "react-dates": "^16.0.1",
    "react-day-picker": "^7.0.7",
    "react-dom": "^16.2.0",
    "react-props": "^0.0.3",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.0.17",
    "react-with-direction": "^1.1.0",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-saga": "^0.16.0",
    "redux-thunk": "^2.2.0",
    "universal-cookie": "^2.1.2",
    "video.js": "^6.6.0",
    "videojs-contrib-hls.js": "^3.1.0"
},
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
},
"devDependencies": {
    "jest-enzyme": "^6.0.4"
}

Answer 1

您需要将 before 改为 beforeAll 和 after 改为 afterAll

改变

   before(() => {
       mount = createMount();
   });

    after(() => {
       mount.cleanUp();
    });

到

   beforeAll(() => {
       mount = createMount();
   });

    afterAll(() => {
       mount.cleanUp();
   });