Jest and console.dir not displaying entire object

Question

I am trying to display an error within a Jest test but it won't show me all of the levels.

import util from 'util'

describe('Module', () => {
  it('should show all levels WITHOUT util', () => {
    const large = {
      level1: {
        level2: {
          message: 'At level 2!',
          level3: {
            message: 'At level 3!',
            level4: {
              message: 'At level 4!',
              level5: {
                message: 'At level 5!',
              },
            },
          },
        },
      },
    }
    console.dir(large, { depth: 5 })
  })

  it('should show all levels with util', () => {
    const large = {
      level1: {
        level2: {
          message: 'At level 2!',
          level3: {
            message: 'At level 3!',
            level4: {
              message: 'At level 4!',
              level5: {
                message: 'At level 5!',
              },
            },
          },
        },
      },
    }
    console.dir(util.inspect(large, { depth: 5 }))
  })
})

This gives me the following results

    { level1: { level2: { message: 'At level 2!', level3: [Object] } } } { depth: 5 }

    { level1:
       { level2:
          { message: 'At level 2!',
            level3:
             { message: 'At level 3!',
               level4:
                { message: 'At level 4!', level5: { message: 'At level 5!' } } } } } }

I was under the impression console.dir should do this for me already but the first test I'm getting [Object] after depth 2

I've even created a simple test outside of Jest and it seems to work as expected for console.dir, can anyone explain why this happens? Does Jest override how dir behaves with its own default depth or something?

const large = {
  level1: {
    level2: {
      message: 'At level 2!',
      level3: {
        message: 'At level 3!',
        level4: {
          message: 'At level 4!',
          level5: {
            message: 'At level 5!',
          },
        },
      },
    },
  },
}
console.dir(large, { depth: 5 })

Results in...

{ level1:
   { level2:
      { message: 'At level 2!',
        level3:
         { message: 'At level 3!',
           level4:
            { message: 'At level 4!', level5: { message: 'At level 5!' } } } } } }

score 1 · Answer 1 · answered Jun 18 '20 at 18:00

tldr; The second argument of console.dir(value, options) is ignored in the current Jest implementation.

Jest redefines the global console with its own implementation. Both in BufferedConsole and CustomConsole you may find that dir method looks like this:

dir(firstArg: unknown, ...args: Array<unknown>): void {
  this._log('dir', format(firstArg, ...args));
}

It's hard to find the exact definition of the format function, but Github suggests the following implementations:

export const format = (value: unknown): string =>
  typeof value === 'function'
    ? value.toString()
    : prettyFormat(value, {min: true});

prettyFormat has maxDepth option which is not passed in all 3 implementations.

Jest and console.dir not displaying entire object

1 Answers1