How to use getProjectNameListElement method in Jest

I had the same issue. Tried in Webstorm terminal following commands: nvm current (I use nvm) and node -v. Both of these commands returned 16.14.0.

But the issue only went away when I changed default used version of node in Webstorm editor itself. You can do this by pressing CTRL + ALT + S. Then select Languages & Frameworks and after that Node.js. Value for Node interpreter: was there 10 and I switched it there to 16.14.0. If you do not have this version od nodejs installed on your machine, I suggest you use nvm (node version manager).

Thanks to some of the suggestions from Phil, I finally figured it out. What I want to test is that closeModal is called when I click the icon. I have already tested that the parent component behaves as expected but I couldn't work out how to mock closeModal because I'm testing this specific component and by default, this is the only one Jest doesn't mock for me. I could stub it manually but that somehow didn't want to work.

What I've done now is mock this.props.onClick within closeModal and I check that it fires.

Here's how that looks in code:

describe('QuestionForm', function() {
  var onClickFunc,
      form;

  beforeEach(function() {
    onClickFunc = jest.genMockFunction();

    form = TestUtils.renderIntoDocument(
      <QuestionForm onClick={onClickFunc} />
    );
  });

  it('should call closeModal when the icon is clicked', function() {
    var closeIcon = TestUtils.findRenderedDOMComponentWithClass(form, 'close-icon');

    TestUtils.Simulate.click(closeIcon);

    expect(onClickFunc).toBeCalled();
  });

});

I think that sufficiently tests that closeModal behaves as expected.

Actually you can use jest.spyOn jest.spyOn

If method is called when component created use:

import { mount } from 'enzyme'; 

describe('My component', () => {
  it('should call getData', () => {
    const spy = jest.spyOn(Component.prototype, 'getData');
    mount(<Component />);
    expect(spy).toHaveBeenCalledTimes(1)
  });
})

or if you have it in your DOM and method use bind you can use:

import { shallow } from 'enzyme'; 

describe('My component', () => {
  it('should call getData', () => {
    const wrapper = shallow(<Component />);
    const instance = wrapper.instance()
    const spy = jest.spyOn(instance, 'getData');
    wrapper.find('button').simulate('click')
    expect(spy).toHaveBeenCalledTimes(1)
  });
})

promiseDelay returns a Promise that resolves after ms so call a spy in then and test to see if the spy has been called after different intervals:

describe('promiseDelay', () => {

  beforeEach(() => { jest.useFakeTimers(); });
  afterEach(() => { jest.useRealTimers(); });

  test('should not resolve until timeout has elapsed', async () => {
    const spy = jest.fn();
    promiseDelay(100).then(spy);  // <= resolve after 100ms

    jest.advanceTimersByTime(20);  // <= advance less than 100ms
    await Promise.resolve();  // let any pending callbacks in PromiseJobs run
    expect(spy).not.toHaveBeenCalled();  // SUCCESS

    jest.advanceTimersByTime(80);  // <= advance the rest of the time
    await Promise.resolve();  // let any pending callbacks in PromiseJobs run
    expect(spy).toHaveBeenCalled();  // SUCCESS
  });

});

Note that test code is synchronous and Timer Mocks make setTimeout synchronous but then queues a callback in PromiseJobs so any queued callbacks need to be allowed to run before testing if the spy has been called.

This can be done by using an async test function and calling await on a resolved Promise which effectively queues the rest of the test at the end of PromiseJobs allowing any pending callbacks to run before the test continues.

Additional information about how promises and fake timers interact is available in my answer here.

Try handling the promise using a try-catch block, as:

  useEffect(() => {
    (async () => {
      try {
        let response = await httpClient.get(
          `${config.resourceServerUrl}/inventory/`
        );
        setSponsor(response.data.sponsor);
        setAddress(response.data.address);
        setPhaseOfTrial(response.data.phaseOfTrial);
      } catch(error) {
        alert(error);
      }
    })();
  }, []);

or

  useEffect(() => {
    (async () => {
        let response = await httpClient.get(
          `${config.resourceServerUrl}/inventory/`
        );
        setSponsor(response.data.sponsor);
        setAddress(response.data.address);
        setPhaseOfTrial(response.data.phaseOfTrial);
    })().catch(e=>alert(e));
  }, []);

Updated with a solution thanks to feedback from @SimenB on GitHub.

Factory function must return a function

The factory function must return the mock: the object that takes the place of whatever it's mocking.

Since we're mocking an ES6 class, which is a function with some syntactic sugar, then the mock must itself be a function. Therefore the factory function passed to jest.mock() must return a function; in other words, it must be a higher-order function.

In the code above, the factory function returns an object. Since calling new on the object fails, it doesn't work.

Simple mock you can call new on:

Here's a simple version that, because it returns a function, will allow calling new:

jest.mock('./sound-player', () => {
  return function() {
    return { playSoundFile: () => {} };
  };
});

Note: Arrow functions won't work

Note that our mock can't be an arrow function because we can't call new on an arrow function in Javascript; that's inherent in the language. So this won't work:

jest.mock('./sound-player', () => {
  return () => { // Does not work; arrow functions can't be called with new
    return { playSoundFile: () => {} };
  };
});

This will throw TypeError: _soundPlayer2.default is not a constructor.

Keeping track of usage (spying on the mock)

Not throwing errors is all well and good, but we may need to test whether our constructor was called with the correct parameters.

In order to track calls to the constructor, we can replace the function returned by the HOF with a Jest mock function. We create it with jest.fn(), and then we specify its implementation with mockImplementation().

jest.mock('./sound-player', () => {
  return jest.fn().mockImplementation(() => { // Works and lets you check for constructor calls
    return { playSoundFile: () => {} };
  });
});

This will let us inspect usage of our mocked class, using SoundPlayer.mock.calls.

Spying on methods of our class

Our mocked class will need to provide any member functions (playSoundFile in the example) that will be called during our tests, or else we'll get an error for calling a function that doesn't exist. But we'll probably want to also spy on calls to those methods, to ensure that they were called with the expected parameters.

Because a new mock object will be created during our tests, SoundPlayer.playSoundFile.calls won't help us. To work around this, we populate playSoundFile with another mock function, and store a reference to that same mock function in our test file, so we can access it during tests.

let mockPlaySoundFile = jest.fn();
jest.mock('./sound-player', () => {
  return jest.fn().mockImplementation(() => { // Works and lets you check for constructor calls
    return { playSoundFile: mockPlaySoundFile }; // Now we can track calls to playSoundFile
  });
});

Complete example

Here's how it looks in the test file:

import SoundPlayerConsumer from './sound-player-consumer';
import SoundPlayer from './sound-player';

let mockPlaySoundFile = jest.fn();
jest.mock('./sound-player', () => {
  return jest.fn().mockImplementation(() => {
    return { playSoundFile: mockPlaySoundFile };
  });
});

it('The consumer should be able to call new() on SoundPlayer', () => {
  const soundPlayerConsumer = new SoundPlayerConsumer();
  expect(soundPlayerConsumer).toBeTruthy(); // Constructor ran with no errors
});

it('We can check if the consumer called the class constructor', () => {
  const soundPlayerConsumer = new SoundPlayerConsumer();
  expect(SoundPlayer).toHaveBeenCalled();
});

it('We can check if the consumer called a method on the class instance', () => {
  const soundPlayerConsumer = new SoundPlayerConsumer();
  const coolSoundFileName = 'song.mp3';
  soundPlayerConsumer.playSomethingCool();
  expect(mockPlaySoundFile.mock.calls[0][0]).toEqual(coolSoundFileName);
});

The other solution didn't work for me. This is how I did:

  jest.mock('../src/dependency', () => ({
    __esModule: true,
    utilityFunction: 'utilityFunction',
    default: 'mainFunction'
  }));

Another way to do it:

jest.unmock('../src/dependency');

const myModule = require('../src/dependency');
myModule.utilityFunction = 'your mock'

This example will work if you compile ES6 modules syntax into ES5, because in the end, all module exports belong to the same object, which can be modified.

import { allowThrough } from './allowThrough';
import { ENABLED } from './constants';
import * as constants from './constants';

describe('allowThrough', () => {
    test('success', () => {
        constants.ENABLED = true;

        expect(ENABLED).toBe(true);
        expect(allowThrough({ value: 1 })).toBe(true);
    });

    test('fail, ENABLED === false', () => {
        constants.ENABLED = false;

        expect(ENABLED).toBe(false);
        expect(allowThrough({ value: 1 })).toBe(false);
    });
});

Alternatively, you can switch to raw commonjs require function, and do it like this with the help of jest.mock(...):

const mockTrue = { ENABLED: true };
const mockFalse = { ENABLED: false };

describe('allowThrough', () => {
    beforeEach(() => {
        jest.resetModules();
    });

    test('success', () => {
        jest.mock('./constants', () => mockTrue)
        const { ENABLED } = require('./constants');
        const { allowThrough } = require('./allowThrough');

        expect(ENABLED).toBe(true);
        expect(allowThrough({ value: 1 })).toBe(true);
    });

    test('fail, ENABLED === false', () => {
        jest.mock('./constants', () => mockFalse)
        const { ENABLED } = require('./constants');
        const { allowThrough } = require('./allowThrough');

        expect(ENABLED).toBe(false);
        expect(allowThrough({ value: 1 })).toBe(false);
    });
});

fix mine by replacing

export default {}

with

module.exports = {}