Test custom hook with react-hooks-testing-library

Question

I am trying to write tests for this custom hook using react-hooks-testing-library.

import { deleteArticleById } from '../../API/articles/deleteArticleById';
const useArticleDelete = () => {
  const [articleId, setArticleId] = useState(null);
  const setArticleIdToDelete = id => {
    setArticleId(id);
  };

  const deleteArticle = useCallback(
    async () => {
      if (!articleId) {
        return;
      }

      try {
        await deleteArticleById(articleId);
        setArticleId(null);
      } catch (e) {
        console.log(e);
      }
    },
    [articleId]
  );

  return { articleId, setArticleIdToDelete, deleteArticle };
};

export default useArticleDelete;

Here are my tests

import { renderHook, act } from '@testing-library/react-hooks'
import { deleteArticleById } from '../../API/articles/deleteArticleById';
import useArticleDelete from './useArticleDelete';

jest.mock('../../API/articles/deleteArticleById');

describe('useArticleDelete', () => {
  test('should use ArticleDelete', () => {
    const { result } = renderHook(() => useArticleDelete())
    act(() => {
      result.current.setArticleIdToDelete(1)
    })
    expect(result.current.articleId).toBe(1)
  });

  test('should delete article', async () => {
    deleteArticleById.mockResolvedValue({});
    const { result } = renderHook(() => useArticleDelete())
    act(() => {
      result.current.deleteArticle()
    })
    expect(result.current.articleId).toBeNull()
  })
});

Test "should delete article" is written, but the they don't cover lines of code between try..catch in deleteArticle function in useArticleDelete hook.

Please help my out to find out that i'm doing wrong

Yadab · Accepted Answer · 2021-03-26 07:40:30Z

1

You need to use await before you call the deleteArticle method as it is an async call. Function will return nothin until it finished the execution of await deleteArticleById(articleId); so you need to wait until it gets executed.

test('should delete article', async () => {
    deleteArticleById.mockResolvedValue({});
    const { result } = renderHook(() => useArticleDelete())
    await result.current.deleteArticle()
    expect(result.current.articleId).toBeNull()
  })

answered Mar 26, 2021 at 7:40

Yadab

1,9031 gold badge12 silver badges16 bronze badges

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

2 Comments

mkonav Over a year ago

Thank you. But what about if deleteArticleById returns an error. Is it a right way to test this? test('should throw error', async () => { deleteArticleById.mockRejectedValue(new Error) const { result } = renderHook(() => useArticleDelete()) try { await result.current.deleteArticle() } catch (e) { expect(e).toBeInstanceOf(Error) } })

Yadab Over a year ago

Thats right you can test it like you said

Collectives™ on Stack Overflow

Test custom hook with react-hooks-testing-library

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related