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

Question

I've made an example from the material-ui Testing page from the site. I've made the app using create-react-app and I've imported enzyme into my project.

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

All my tests fail to run throwing the following error ReferenceError: before is not defined

Everywhere I've read states that I don't need to configure jest, as it comes out of the box with create-react-app. Below is my package.json, how am I supposed to configure my application so I can run these tests?

{
"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

You need to change before to beforeAll and after to afterAll

Change

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

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

To

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

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