CODEWITHSUNDEEP
javascriptnode.jsmocha.jssinonchai
boring10
boring10

Reputation: 103

Console logging sinon.spy() shows [Function] instead of the contents of the spy

I am trying to see the output of sinon.spy() but when I do a console.log( res.render ) I just see [Function] in the console when I run the test.

const should = require( 'chai' ).should()
const sinon = require( 'sinon' )

const getIndex = ( req, res ) => {
  res.render( 'index' )
}

describe( 'getIndex', function () {
  it( 'should render index', function () {
    let req = {}
    let res = {
      render: sinon.spy()
    }

    getIndex( req, res )

    console.log( res.render ) // Expecting all properties from sinon.spy()
    res.render.firstCall.args[ 0 ]
      .should
      .equal( 'index' )
  } )
} )

EDIT: I was expecting to see all of the properties that are available from sinon.spy(). For instance, the firstCall.args[ 0 ] property but I was wanting to see all of the properties. I know that they are listed at https://sinonjs.org/releases/v7.4.2/spies/ but I was hoping to see all of the properties at once since I am trying to get a better grasp on how sinon works for testing.

Upvotes: 2

Views: 1584

Answers (2)

try-catch-finally
try-catch-finally

Reputation: 7634

TL;DR

  • Spies are functions.
  • The dev tools console or watch overview don't show properties of function objects.

Spies

Spies are functions because they're supposed to be used as function proxies or to replace functions on objects to track calls to them. The spy will internally track the calls to allow programmatic inspection.

Javascript

You might not know that in Javascript functions are objects too.

In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are Function objects.

Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions

Functions can have properties and the properties can be defined or configured like on "normal" objects.

The reason that the spy does not show attributes in the inspector, either by debugger or by a console.log(), is, that the dev tools know its a function and functions are shown as such.

Dev tools

Dev tools obviously assume Function objects (usually) don't have special properties and thus won't enumerate them.

You can observe that with basic functions too. Enter this into the console:

var f = function() { }
f.foo = 42;
f; // The property won't be printed

Though, you're able to inspect the spy object in the debugger when stopping at a breakpoint. You would add the reference to the "Watch" panel in the "Source" tab. Then you can open the function object and inspect the properties.

With the previous experiment done you could indeed inspect the function by adding a watch expression for f.

A Sinon spy object under inspection:

Chrome dev tools showing details on an inspected spy

Upvotes: 1

ipsa scientia potestas
ipsa scientia potestas

Reputation: 531

  • When you click on the function part (if you are in chrome dev console at least) it will show you the contents of the function code, not its results.
  • This is because res.render is not a string or number or whatever, it is a function.
  • Therefore, we need some way of logging the output of res.render.
  • If we call res.render and pass it its necessary arguments, we will get the output of res.render().
  • TL;DR I would try something like console.log(res.render("index")) instead of just console.log(res.render)

Upvotes: 1

Related Questions