unit test custom hook with jest and react testing library

Question

I am trying to unit test a custom hook using jest and react testing library in scenario where error is thrown but I am not able to catch the actual error message, here is my code so far:

my first hook:

import react from 'react';

const useFirstHook = () => {

    //I will add conditional logic later
    throw new Error('my custom error is thrown')

    const test1 = 'I am test 1';

    return {
        test1
    };

};

export default useFirstHook;

test.js

import React from 'react';
import { render } from '@testing-library/react';

import useFirstHook from './useFirstHook';

describe('useFirstHook', () => {

    //I also tried adding jest.spy but no luck
    /* beforeAll(() => {
        jest.spyOn(console, 'error').mockImplementation(() => {})
    }); */

    it('test 1', () => {

        let result;

        const TestComponent = () => {
            result = useFirstHook()
            return null;
        };

        render(<TestComponent />)

        //expect()

    });

});

my logic is to first create a hook, unit test it and then create component, add hook there and test that component with hook integration as well. what am I missing, or my approach is completely wrong ?

Just to be clear, you want to test if the error you have inside the hook is thrown? — juliomalves
– juliomalves, Commented Mar 9, 2021 at 18:15
Does this answer your question? How to test custom hooks in React using JEST, Enzyme? — Emile Bergeron
– Emile Bergeron, Commented May 31, 2021 at 22:00

AdriSolid · Accepted Answer · 2021-03-10 11:37:14Z

3

A good approach would be testing the component itself, that already contains the hook.

In case you consider that the hook needs to be test without the component, you can use @testing-library/react-hooks package, something like:

const useFirstHook = (shouldThrow = false) => {
  // throw onmount
  useEffect(() => {
    if (shouldThrow) throw new Error('my custom error is thrown');
  }, [shouldThrow]);

  return {
    test1: 'I am test 1'
  };
};

describe('useFirstHook', () => {
  it('should not throw', () => {
    const { result } = renderHook(() => useFirstHook(false));
    expect(result.current.test1).toEqual('I am test 1');
  });

  it('should throw', () => {
    try {
      const { result } = renderHook(() => useFirstHook(true));
      expect(result.current).toBe(undefined);
    } catch (err) {
      expect(err).toEqual(Error('my custom error is thrown'));
    }
  });
});

edited Mar 10, 2021 at 11:37

answered Mar 9, 2021 at 19:49

AdriSolid

2,8231 gold badge10 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

unit test custom hook with jest and react testing library

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related