javascript - 运行 react 测试时出错 : Enzyme, Jest 和 React

Question

运行我的测试时收到此错误:

 FAIL  src/components/common/user/UserMenu/__tests__/UserMenu.test.js
● Runtime Error
Error: Failed to get mock metadata: /redacted-directory/node_modules/core-js/library/modules/_global.js

See: http://facebook.github.io/jest/docs/manual-mocks.html#content
    at Object.<anonymous> (/redacted-directory/node_modules/core-js/library/modules/_shared.js:1:133)
    at Object.<anonymous> (/redacted-directory/node_modules/core-js/library/modules/_shared-key.js:1:133)
npm ERR! Test failed.  See above for more details.  

被测组件:

import React, { Component, PropTypes } from 'react';
import { Nav, NavItem, Dropdown, MenuItem, Glyphicon } from 'react-bootstrap';
import { FORM_LOGIN, FORM_SIGNUP } from 'redux/modules/auth/auth';
import { LinkContainer } from 'react-router-bootstrap';
// import './UserMenu.scss';

export default class UserMenu extends Component {

  static propTypes = {
    user: PropTypes.object,
    organisation: PropTypes.object,
    logout: PropTypes.func.isRequired,
    showForm: PropTypes.func.isRequired
  };

  render() {

    const { user, organisation, showForm, logout } = this.props;

    return (
      <div className="user-menu">
        {!user &&
          <Nav navbar pullRight>
            <NavItem className="login" onClick={showForm.bind(null, FORM_LOGIN)}>Log in</NavItem>
            <NavItem className="signup" onClick={showForm.bind(null, FORM_SIGNUP)}>Sign up</NavItem>
          </Nav>}

        {user &&
          <Nav navbar pullRight>
            <li>
              <Dropdown id="profile-menu">
                <Dropdown.Toggle>
                  <span className="profile-name">{user.first_name}</span>
                  <img src={user.avatar} className="profile-image" />
                </Dropdown.Toggle>
                <Dropdown.Menu>
                  <MenuItem eventKey="1"><Glyphicon glyph="star" />Shortlist</MenuItem>
                  <MenuItem eventKey="2"><Glyphicon glyph="search" />Saved Searches</MenuItem>
                  <LinkContainer to="/user">
                    <MenuItem eventKey="3"><Glyphicon glyph="cog" />Edit Profile</MenuItem>
                  </LinkContainer>
                  <MenuItem className="logout" eventKey="4" onClick={logout}><Glyphicon glyph="log-out" />Log Out</MenuItem>
                  {organisation && <MenuItem divider />}
                  {organisation &&
                      <LinkContainer to="/admin" className="organisation">
                        <MenuItem eventKey="3">
                          <img src={organisation.avatar} />
                          {organisation.name}
                        </MenuItem>
                      </LinkContainer> }
                </Dropdown.Menu>
              </Dropdown>
            </li>
          </Nav>}
      </div>
    );
  }
}

单元测试:

jest.unmock('../UserMenu');

import React from 'react';
import ReactDOM from 'react-dom';
//import TestUtils from 'react-addons-test-utils';
import { shallow, mount } from 'enzyme';
import UserMenu from '../UserMenu';

describe('CheckboxWithLabel', () => {

  const properties = {
    user: {
      first_name: 'Fat',
      last_name: 'Freddie\'s',
      email: 'fatfreddy@example.com',
      avatar: 'http://image.com/image.jpg',
    },
    logout: () => {},
    showForm: () => {},
  };

  it('displays a dropdown menu - logged in', () => {
    const wrapper = shallow(
      <UserMenu {...properties} />
    );
     (wrapper.find(UserMenu).length).toBe(1);
  });

});   

Package.json:

"jest": {
  "unmockedModulePathPatterns": [
    "<rootDir>/node_modules/react",
    "<rootDir>/node_modules/react-dom",
    "<rootDir>/node_modules/react-addons-test-utils",
    "<rootDir>/node_modules/enzyme"
  ]
},

Answer 1

将“/node_modules/core-js”添加到 packages.json 中的 unmockedModulePathPatterns