0

I have a notfications.js file which I want to write jest tests for. Can someone tell me how to approach the test cases for this.

import { store } from 'react-notifications-component';

/**
 * Helper function to add a notification anywhere.
 * @param {*} title string
 * @param {*} message string
 * @param {*} type  string of success, danger, info, default, warning
 */
const addNotification = (title, message, type) => {
  const options = {
    title,
    message,
    type,
    insert: 'top',
    container: 'top-right',
    animationIn: ['animated', 'fadeIn'],
    animationOut: ['animated', 'fadeOut'],
  };

  store.addNotification({
    ...options,
    dismiss: {
      duration: 5000,
      onScreen: true,
      pauseOnHover: true,
    },
  });
};

export default addNotification;

I read the jest documentation and read about mock functions but wasn't able to figure a lot out. First time trying to write a unit test.

Solution: I was able to do the testing by creating a spy for the store using jest spyOn. My test was:

const params = {
  title: 'test',
  type: 'success',
  message: 'this is a test notification!',
};

describe('addNotification', () => {
  beforeAll(() => {
    jest.spyOn(store, 'addNotification');
  });

  afterAll(() => {
    jest.restoreAllMocks();
  });

  test('calls store.addNotification()', () => {
    addNotification(params.title, params.message, params.type);
    expect(store.addNotification).toHaveBeenCalled();
  });

});

Note: Please refer to the answer provided by @slideshowp2 it is a better solution.

1 Answer 1

1

You need to use jest.mock(moduleName, factory, options) to mock react-notifications-component package. I add { virtual: true } option because I didn't install this package, just for demonstration. If you had installed this package, you can remove this option.

E.g.

notifications.js:

import { store } from 'react-notifications-component';

const addNotification = (title, message, type) => {
  const options = {
    title,
    message,
    type,
    insert: 'top',
    container: 'top-right',
    animationIn: ['animated', 'fadeIn'],
    animationOut: ['animated', 'fadeOut'],
  };

  store.addNotification({
    ...options,
    dismiss: {
      duration: 5000,
      onScreen: true,
      pauseOnHover: true,
    },
  });
};

export default addNotification;

notifications.test.js:

import addNotification from './notifications';
import { store } from 'react-notifications-component';

jest.mock(
  'react-notifications-component',
  () => {
    const mStore = {
      addNotification: jest.fn(),
    };
    return { store: mStore };
  },
  { virtual: true },
);

describe('61461299', () => {
  it('should pass', () => {
    const title = 'jest';
    const message = 'unit testing';
    const type = 'ok';
    addNotification(title, message, type);
    expect(store.addNotification).toBeCalledWith({
      title,
      message,
      type,
      insert: 'top',
      container: 'top-right',
      animationIn: ['animated', 'fadeIn'],
      animationOut: ['animated', 'fadeOut'],
      dismiss: {
        duration: 5000,
        onScreen: true,
        pauseOnHover: true,
      },
    });
  });
});

unit test results with 100% coverage:

 PASS  stackoverflow/61461299/notifications.test.js (11.362s)
  61461299
    ✓ should pass (4ms)

------------------|---------|----------|---------|---------|-------------------
File              | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
------------------|---------|----------|---------|---------|-------------------
All files         |     100 |      100 |     100 |     100 |                   
 notifications.js |     100 |      100 |     100 |     100 |                   
------------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        13.33s

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

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.