menu

Testing Library

Simple and complete DOM testing utilities that encourage good testing practices.

Channels
Chat
view-forward
# All channels
view-forward
# General
view-forward
# General Help
view-forward
# Angular Help
view-forward
# Cypress Help
view-forward
# DOM Help
view-forward
# React Help
view-forward
# TestCafe Help
view-forward
# Vue Help
view-forward
Team

Testing components that should throw

April 3, 2019 at 8:25am

Testing components that should throw

April 3, 2019 at 8:25am
I'm using componentDidCatch on top parent component to handle generic errors. In my component therefore I'm throwing if some unknown API error happens and I can't handle it. Of course I would like to test this component if it throws, when API error happens. And it does, test passes, but I got error in jest output. Is there any way to hide this error?
My test:
it('should throw an error when there\'s an error', () => {
const error = new Error('Some error!');
useUserList.mockReturnValue({
items: [],
error,
loading: false,
handleRemoveItem: () => {},
});
const renderList = () => {
render(<UserListPage listName={userListTitleToEnum.WATCHLIST} />);
};
expect(renderList).toThrow(error);
});
As I've mentioned, test passes, so everything's fine from testing library so far, CI passes, except this red thing I got in output.
console.error node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/virtual-console.js:29
Error: Uncaught [Error: Some error!]
Not a big issue, but I would like to hide this noise, because there will be more components throwing in future. Any idea, what can I do or what I did wrong? Or am I thinking incorrectly about components and error handling?
Thanks for all help!

May 3, 2019 at 6:47pm
You should to pass a function to expect if you want to catch an error. I guess like this expect(() => renderList).toThrow(error).
Edited
  • reply
  • like

August 12, 2019 at 10:21pm
He did it when he assigned renderList. Did anyone solve this? I used spyOn(console, 'error') but that is not ideal I think
  • reply
  • like

December 23, 2019 at 12:42pm
Do you have try with a try catch ?
let exception
try {
render(<UserListPage listName={userListTitleToEnum.WATCHLIST} />);
} catch (e) { exception = e }
expect(e).toEqual(error)
Edited
  • reply
  • like

February 20, 2020 at 4:31pm
Would be nice to have a cleaner way to solve this. Sadly the try ... catch approach didn't work for me, the error keeps showing in the console.
Edited
  • reply
  • like

February 21, 2020 at 10:48pm
I would try rendering the error boundary as well, and asserting on the behavior of componentDidCatch
Edited
  • reply
  • like
In my case I'm using hooks, and as far as I know, they didn't implement yet an interface equivalent to the error boundaries that we use to have on class components.
  • reply
  • like
I don't follow. Why would an ErrorBoundary not catch any errors thrown by <UserListPage />?
  • reply
  • like
I think I misunderstood you , I thought you were saying to use the componentDidCatch and turn the <UserListPage /> itself on a ErrorBoundary. Your suggestion would definitely work, an ErrorBoundary wrapping the <UserListPage /> does the trick. In my case I don't use error boundaries and the component I'm testing is a function component that throws a specific error.
  • reply
  • like
Ahh. What eventually catches the error?
  • reply
  • like
But on case, his ErrorBoundary deals with the exceptions in a generic way. How he could assert on the specific error that are being thrown?
  • reply
  • like
The type of error is an implementation detail. What does the error boundary do when it receives the specific error? Test that.
  • reply
  • like

February 27, 2020 at 5:33pm
The error boundary doesn't do any specific treatment, it shows some generic response. I think this was done mainly to prevent a crash on the entire app and give a bad UX to the end-user, but the code shouldn't behave the same, hiding errors of any kind. If a new unexpected error is being thrown by the component, the test should fail.
  • reply
  • like

February 28, 2020 at 12:30pm
I'm getting the same issue too. I'm trying to test as follows:
it('throws an error', () => {
const component = render(<Component />);
expect(component).toThrow(); // fails
});
and it fails to catch the thrown error.
For plain functions though, it works as expected:
it('throws an error', () => {
const fn = () => {
throw new Error();
};
expect(fn).toThrow(); //passes
});
Edited
  • reply
  • like
Update: I ended up wrapping it in a function and it passed:
it('throws an error', () => {
expect(() => render(<Component />)).toThrow(); // passes
});
however, it still logs the error in the console :(
  • reply
  • like

March 1, 2020 at 6:08pm
I have the same issue. My component is supposed to throw an error if the data is bad and test is verified but looks ugly.
  • reply
  • like
I added the --silent flag to scripts.test in package.json, which I believe is similar to jest --silent. It hides any console/ throws now.
Edited
  • reply
  • like