jest.mock() makes module undefined when importing it no matter what we return in factory function

./src/StatelessComponent.tsx

import * as React from 'react';
import ChildComponent from './ChildComponent';

const StatelessComponent = () => (
  <div>  
    <ChildComponent />
  </div>
);

export default StatelessComponent;

./src/ChildComponent.tsx

import * as React from 'react';

const ChildComponent = () => (<b>Hello</b>);

export default ChildComponent;

./__tests__/StatelessComponent.test.tsx

jest.mock('../src/ChildComponent', () => 'ChildComponent');

// rest of the test here

When running the test in TS, ChildComponent is undefined. When running the test in ES6, ChildComponent is defined.

Can be related to this issue in Jest repo: https://github.com/facebook/jest/issues/2984

[bhouser]

Ok I have a solution (actually my genius coworker @junseld found it).

It appears to have something to do with the way import/export behaves in Typescript compared to ES6.

Instead of this:

jest.mock('../src/ChildComponent', () => 'ChildComponent');

Do this:

jest.mock('../src/ChildComponent', () => {
  return {
    'default': 'ChildComponent'
  }
});

I guess default export in ES6 allows the exported value to be imported directly, but Typescript creates a named export called “default”. So your mock needs to be an object with a default key: {default: theDefaultExport}

[adrifmonte]

To mock an ES6 dependency module default export using jest:

Instead of:

jest.mock('../src/ChildComponent', () => 'ChildComponent');

What worked for me was:

import ChildComponent from '../src/ChildComponent';
jest.mock('../src/ChildComponent');
ChildComponent.mockImplementation(() => 'ChildComponent');

The other options didn’t work for me.