[Bug] Unable to mock default exported Component when same module also has named export

[zpalexander]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
I have an ES6 module that exports a React Component class by default, but also exports a plain JS function as a named export. When testing other packages that use this module, I want to mock both the default exported component and named exported function to keep my unit tests pure.

The module looks something like this:

import React, { Component } from 'react';

export default class MyComponent extends Component {
  render() {
    return <div>Hello</div>
  }
}

export function myUtilityFunction() { return 'foo' };

I would like to use the following syntax to mock the exports:

import React from 'react';
import MyComponent, { myUtilityFunction } from './module';

jest.mock('./module');
MyComponent.mockImplementation(() => 'MockComponent');
myUtilityFunction.mockImplementation(() => 'foo');

When I try to use this syntax, however, MyComponent does not appear to be mocked when used within other components. When I try to mock MyComponent like this and render it on its own, it renders out to null.

This behavior is very strange, because if I use the exact same syntax, but both imports are JavaScript functions, the mocking works as expected. See the StackOverflow issue I opened here that confirms that the syntax works when the imports are both functions.

Here is a GitHub repo demoing the problem, as well as several solutions I've tried: https://github.com/zpalexander/jest-enzyme-problem

What is the expected behavior?

I should be able to import the default exported component and the named exported function into my test file, and mock both using jest.mock('path') and the .mockImplementation() method.

Please provide your exact Jest configuration and mention your Jest, node,
yarn/npm version and operating system.

See this repo for an exact reproduction: https://github.com/zpalexander/jest-enzyme-problem

You can build the repo and run the tests with yarn install && yarn test

Thanks!

[rickhanlonii]

Hey @zpalexander, thanks for the question I'm sure it's pretty frustrating

Unfortunately, this issue tracker is not a help form. If you could open a new StackOverflow issue (as you mentioned you would do in the first SO issue) or ping me on our discord channel, I'd be happy to help there!

[zpalexander]

Happy to ask in the appropriate channel, but before I do can you just confirm that this is expected behavior / a WONTFIX bug? I opened a bug here because the API is behaving inconsistently and there's no documentation around the discrepancy, and I think it'd be helpful for people coming to the issue queue with the same question to have a definitive statement that it is supposed to work this way.

Thanks for the prompt reply and the offer of help!

Edit: I've opened a StackOverflow issue in place of this issue: https://stackoverflow.com/questions/48831701/jest-how-to-mock-default-export-component-when-same-module-also-has-named-expor

[joaovieira]

For others, this helped me out:

jest.mock('./myModule', () => ({
  __esModule: true,
  namedExport: jest.fn(),
  default: jest.fn(),
}));

import myModule, { namedExport } from './myModule';

[zpalexander]

To follow up, the solution I ended up using was:

MyComponent.mockImplementation(() => {
  return {
    render: () => <div>MockComponent</div>
  };
});

The solution that @joaovieira posted works as well.

Hopefully Jest can eventually provide users with a mocking API that requires less boilerplate.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.