DEV Community

Cover image for How To Test Console Log
Chris Cook
Chris Cook

Posted on • Updated on

How To Test Console Log

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();
  });
});
Enter fullscreen mode Exit fullscreen mode

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.

Jest Test Summary

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();
Enter fullscreen mode Exit fullscreen mode

Latest comments (2)

Collapse
 
shalinibaskaran12 profile image
Shalini Baskaran

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!

Collapse
 
marcandreh profile image
Marc-Andre

Nice one!