In my case, I had to mock a Node.js module. I'm using React and Redux in ES6, with Jest and Enzyme for unit tests.

In the file I'm using, and writing a test for, I'm importing the node modules as default:

import nodeModulePackage from 'nodeModulePackage';

So I needed to mock it as a default since I kept getting the error (0, _blah.default) is not a function..

My solution was to do:

jest.mock('nodeModulePackage', () => jest.fn(() => {}));

In my case, I just needed to override the function and make it return an empty object.

If you need to call a function on that node module, you'll do the following:

jest.mock('nodeModulePackage', () => ({ doSomething: jest.fn(() => 'foo') }));

Here is the unit test solution using jestjs and react-dom/test-utils:

index.tsx:

import React, { FC, useState, useEffect } from 'react';
import { GetTotal } from './getTotal';

interface Props {
  activeTab: string;
}

function handleCount(dates: object, setCount: Function, activeTab?: string) {
  const totalCount = new GetTotal(dates, activeTab);
  setCount(totalCount.totalAttendances());
}

export function handleYearTab(setCount: Function, activeTab: string) {
  if (activeTab === 'Year') {
    handleCount(new Date(), setCount, activeTab);
  }
}

const Content: FC<Props> = ({ activeTab }) => {
  const [count, setCount] = useState<number>(0);

  useEffect(() => {
    handleYearTab(setCount, activeTab);
  });

  return <div>{count}</div>;
};

export default Content;

getTotal.ts:

export class GetTotal {
  constructor(dates, activeTab) {}
  public totalAttendances(): number {
    return 1;
  }
}

index.test.tsx:

import Content from './';
import React from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import { act } from 'react-dom/test-utils';
import { GetTotal } from './getTotal';

describe('60638277', () => {
  let container;
  beforeEach(() => {
    container = document.createElement('div');
    document.body.appendChild(container);
  });

  afterEach(() => {
    unmountComponentAtNode(container);
    container.remove();
    container = null;
  });
  it('should handle year tab', async () => {
    const totalAttendancesSpy = jest.spyOn(GetTotal.prototype, 'totalAttendances').mockReturnValue(100);
    const mProps = { activeTab: 'Year' };
    await act(async () => {
      render(<Content {...mProps}></Content>, container);
    });
    expect(container.querySelector('div').textContent).toBe('100');
    expect(totalAttendancesSpy).toBeCalled();
    totalAttendancesSpy.mockRestore();
  });

  it('should render initial count', async () => {
    const mProps = { activeTab: '' };
    await act(async () => {
      render(<Content {...mProps}></Content>, container);
    });
    expect(container.querySelector('div').textContent).toBe('0');
  });
});

unit test results with coverage report:

 PASS  stackoverflow/60638277/index.test.tsx (9.331s)
  60638277
    ✓ should handle year tab (32ms)
    ✓ should render initial count (11ms)

-------------|---------|----------|---------|---------|-------------------
File         | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-------------|---------|----------|---------|---------|-------------------
All files    |   95.24 |      100 |   85.71 |   94.12 |                   
 getTotal.ts |      80 |      100 |   66.67 |      75 | 4                 
 index.tsx   |     100 |      100 |     100 |     100 |                   
-------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        10.691s

source code: https://github.com/mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/60638277

You need to do 'export default' in the sum function if you want to import the function without unpacking. Otherwise, you need to unpack when importing like 'import {sum} from...'

It looks like the reason why you're getting this error has to do with the data you're mocking through Jest.

Try using jest.fn() to mock your getIdToken as a function, rather than a string:

const mockGetIdToken = jest.fn(() => 'abc123');

jest.mock('services/firebase', () => new Promise(resolve => resolve({
  signInWithEmailAndPassword: () => Promise.resolve({ getIdToken: mockGetIdToken }),
  getIdToken: mockGetIdToken,
  signOut: () => jest.fn()
})));

describe('login actions', () => {
  let store;

  beforeEach(() => {
    store = mockStore({});
  });

  it('signIn should call firebase', () => {
    const user = {
      email: '[email protected]',
      password: 'abd123'
    };

    return store.dispatch(signIn(user.email, user.password))
      .then(() => {
        console.log('TEST signIn SUCCESS');
        expect(mockSignIn).toHaveBeenCalled();
        expect(store.getActions()).toEqual({
          type: USER_ON_LOGGED_IN
        });
      })
      .catch((err) => {
        console.log('TEST signIn ERROR =>', err);
      });
  });

I had the same weird issue… In my case I had a file called feature.js just next to the real file I wanted to import feature.ts.

The .js file probably appeared when I ran tsc by mistake (or webstorm did it for me…)

In my understanding, jest tried to import the .js file instead of the .ts one

Removing feature.js fixed the problem. PS: I am running TS 4.5.

Your import statements are off a bit. Try this instead:

import { sum, subtract } from '../src/utils/FakeUtils.js';

Since you aren't exporting with the default keyword, you need to place your imports in curly braces. You can only have one default export, so this approach makes sense.

restart metro bundler with yarn start or npm start solved my problem

Add this to your test file.

import 'isomorphic-fetch';

The jest object is automatically in scope within every test file, so there's no need to import it explicitly. If you do want to import the jest object directly, you want to import the jest-mock module, not the jest-cli module, via:

// Not necessary inside a Jest test file
import jest from 'jest-mock';

const mock = jest.fn();