пользовательский хук unit test с библиотекой тестирования jest и react

Я пытаюсь выполнить модульное тестирование пользовательского хука с использованием библиотеки тестирования jest и реакции в сценарии, в котором возникает ошибка, но я не могу уловить фактическое сообщение об ошибке, вот мой код на данный момент:

мой первый крючок:

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()

    });

});

Моя логика состоит в том, чтобы сначала создать ловушку, провести ее модульное тестирование, а затем создать компонент, добавить туда ловушку и протестировать этот компонент с интеграцией ловушек. что мне не хватает, или мой подход совершенно неверен?


reactjs unit-testing jestjs react-testing-library
person user1751287    schedule 09.03.2021    source источник
comment
Для ясности: вы хотите проверить, не возникает ли ошибка внутри хука?   -  person juliomalves    schedule 09.03.2021
comment
@juliomalves да, если это имеет смысл   -  person user1751287    schedule 09.03.2021
comment
Отвечает ли это на ваш вопрос? Как протестировать пользовательские хуки в React с помощью JEST, Enzyme?   -  person Emile Bergeron    schedule 01.06.2021

Ответы (1)


arrow_upward
1
arrow_downward

Хорошим подходом будет тестирование самого компонента, который уже содержит ловушку.

Если вы считаете, что ловушку нужно протестировать без компонента, вы можете использовать пакет @testing-library/react-hooks, например:

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'));
    }
  });
});
person AdriSolid    schedule 09.03.2021