Jest: [jest-12.x.x] Failed to get mock metadata: core-js

[andrewmclagan]

When running my tests recieving this error:

 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.  

Component under test:

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

Unit test:

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: '[email protected]',
      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"
  ]
},

[andrewmclagan]

⚡ npm --version

3.8.9

[cpojer]

Are you using babel-jest as well? Does it get printed when you run Jest?

As a workaround you can add "node_modules/core-js" to the unmocked patterns.

[andrewmclagan]

yeah using babel-jest @ "^12.0.2"

I added core-js to the list previously. Although its throwing:

TypeError: Cannot read property 'apply' of undefined

Am i correct in assuming this is some kind of babel related issue? Having trouble diagnosing it...

[cpojer]

There was a small bug similar to your initial description in Jest earlier. It was fixed in 12.0.2 - are you sure you tried the latest version?

[cpojer]

I'm gonna close this for now because I don't believe there is a Jest bug here. core-js should be automocked as a polyfill when used with babel-jest. I just re-tried the react example in the examples folder with the latest version of babel and core js and everything works fine.

Happy to reopen if you have a repro. If you can provide a repository where I can highlight this issue with an npm install and jest run, I'm happy to reopen this issue and fix it :)

[andrewmclagan]

Okay i will investigate further and return :-)

[andrewmclagan]

@cpojer

Okay, I have more information.

When the component under test is declared as such:

import React, { PropTypes } from 'react';

export default class UserMenu extends React.Component {

    // ...

everything is fine :-) Although when the component is declared like so:

import React, { Component, PropTypes } from 'react';

export default class UserMenu extends Component {

    // ...

We get the core-js mocking errors. There were other errors with my PropTypes declarations, tht was solved with "stage-0" in .babelrc

Everything else is as the test repo!

[ecoleman]

I had this issue, and believe I tracked it down somewhat.. I have:

• "babel-plugin-transform-runtime": "^6.7.5" in my package.json
• [email protected] installed
• transform-runtime listed in my babelrc

After removing the plugin from babelrc, and running jest --no-cache everything was working.

[andrewmclagan]

Personally i would really like to be using transform-runtime until webpack 2 is usable, with tree shaking.

[cpojer]

If you unmock the path to transform runtime in the unmock patterns it should work. We don't currently special case it like we do with the polyfills but maybe we should.

[andrewmclagan]

ok i will do that, although +1 for the exception moving forward.

[0xR]

I am having the same issue with jest 17. Removing the babel-runtime from .babelrc solves the issue. But I want to use the babel-runtime. What @cpojer mentions above: unmock the path to transform runtime. Sounds vague to me. Can you provide a code sample?

[cpojer]

@0xR do you have automocking enabled? This shouldn't happen with the default config in Jest 17.

[0xR]

@cpojer Yes, I have automocking enabled for that test suite. I figured that makes sense because I have to mock of the imports. Indeed doing mocking manually solves the issue. But I'm up to 9 mocks now.

It would be nice to have automocking not cause issues with babel-runtime. For now I'll continue with manual mocking.