bill
bill

Reputation: 318

mocking imports that contain both named and a default export

I have a utilities file that contains many exports as well as a default export. both the named and export default is used within the same component. I am unable to determine how to write tests against both the named and default components in the same test.

The code below illustrates the app in a simplified manner.

utils.js

export const mock1svc = () => {
  return true;
};

const mock2svc = () => {
  return true;
};

export default mock2svc;

comp.js (fyi, the app renders fine)

import Utils, { mock1svc } from 'utils';
...
render (
    <p>{mock1svc()}</p>
    <p>{Utils()}</p>
)

comp-test.js

i can either test the default export:

jest.mock('../mock-utils', () => jest.fn());

error generated:

TypeError: (0 , _mockUtils.mock1svc) is not a function

or test named exports:

jest.mock('../mock-utils', () => ({
  mock1svc: jest.fn(),
  mock2svc: jest.fn(),
}));

error generated:

TypeError: (0 , _mockUtils.default) is not a function

Upvotes: 7

Views: 216

Answers (1)

James
James

Reputation: 117

The utils module is exporting an object. You should be able to create that object and assign it a .default like so:

jest.mock('../mock-utils', () => {
  const mockUtils = {
    mock1svc: jest.fn(),
    mock2svc: jest.fn(),
  };
  mockUtils.default = jest.fn();

  return mockUtils
});

Make sure that the path you're mocking 'points' to the same location as the import statement.

Upvotes: 0

Related Questions