We all love console.log
to debug our applications. If something is not working as expected, we throw in a console log to see what's going on. Besides for debugging purposes, we can use this information also for our tests. In testing, we usually call a function with a certain input and expect a certain output. Sometimes it can be useful to also test the intermediate steps that happened between the start and the end of the function, for example to check if the warnings and errors were logged correctly.
Test Console Log
In Jest, we have two ways to verify that console.log
was called as we expect it to be. First, we can mock the function with jest.fn()
, which temporarily replaces the original console log function with a dummy function. However, I personally prefer the second option of using jest.spyOn()
to intercept function calls to the console log and track them. This does not change the original behavior of console log, that means we still see the messages printed to the console.
// function to be tested and imported from somewhere else
function someComplexFunction() {
console.log("some important message");
console.log("some other message");
return 42;
}
// test case for someComplexFunction()
describe('Test someComplexFunction', () => {
test('Console log should have been called', () => {
const logSpy = jest.spyOn(global.console, 'log');
someComplexFunction();
expect(logSpy).toHaveBeenCalled();
expect(logSpy).toHaveBeenCalledTimes(2);
expect(logSpy).toHaveBeenCalledWith('some important message');
expect(logSpy.mock.calls).toContainEqual(['some other message']);
logSpy.mockRestore();
});
});
With the mock object returned by jest.spyOn()
we can perform various checks. For example, we can check whether console log was called, how many times it was called, and with what message it was called. Also, we can use the logSpy.mock.calls
object to check each individual call to console log and in what order it was made. At the end of the test, we need to restore the original console log function with logSpy.mockRestore()
. This will ensure that there are no side effects in other tests.
Finally, when we run the tests with jest
, we see that all tests passed.
Additionally, we see the output of the console log statements of our someComplexFunction
test. If we want to hide these messages from the test summary, we can completely replace the console log function with an empty mock b adding .mockImplementation(() => { })
. Now, no messages will appear on the console.
// replace console log with an empty mock function
const logSpy = jest.spyOn(global.console, 'log')
.mockImplementation(() => { });
// do some tests...
// no message will be printed to the console
// restore original console log
logSpy.mockRestore();
Top comments (2)
Great article! It helped me in the current testing project I am working on. I recently came across an interesting Post on 'Debugging JavaScript Using the Browser’s Developer Console' It covers how to use browser's developer console to debug JavaScript. If you're interested in diving deeper into this topic, you might find it worth checking out. Happy browsing and developing!
Nice one!