Snapshot file doesn't pretty-format

[wdhorton]

Excited about the new snapshot testing! I tried to set it up, and it runs, but for some reason the generated snapshot file (and diff when the test fails) is shown as an object, rather than pretty-formatted like in the blog post.

Packages:

"jest": "^14.1.0",
"babel-jest": "^14.1.0",
"react-test-renderer": "^15.3.0",
"react": "^15.3.0"

My config:

{
    "automock": false,
    "scriptPreprocessor": "<rootDir>/config/jest/transform.js",
    "testEnvironment": "node"
}

config/jest/transform.js:

const babelServer = require('../babel.server');
const babelJest = require('babel-jest');

module.exports = babelJest.createTransformer(babelServer);

babel.server:

module.exports = {
  presets: [
    'es2015',
    'react',
  ],
  plugins: [
    'syntax-trailing-function-commas',
    'transform-class-properties',
    'transform-object-rest-spread',
  ],
};

LoginLink component:

import React from 'react';

export default function LoginLink() {
  return <a href="/auth/google">Log in</a>;
}

Test:

import React from 'react';
import renderer from 'react-test-renderer';
import LoginLink from '../LoginLink';

test('LoginLink renders correctly', () => {
  const tree = renderer.create(
    <LoginLink />
  );
  expect(tree).toMatchSnapshot();
});

Snapshot:

exports[`test LoginLink renders correctly 1`] = `
 {
  "_component":  {
    "_calledComponentWillUnmount": false,
    "_compositeType": 0,
    "_context": Object {},
    "_currentElement": Object {
      "$$typeof": Symbol(react.element),
      "_owner": null,
      "_store": Object {},
      "key": null,
      "props": Object {
        "$$typeof": Symbol(react.element),
        "_owner": null,
        "_store": Object {},
        "key": null,
        "props": Object {},
        "ref": null,
        "type": [Function LoginLink]
      },
      "ref": null,
      "type": [Function anonymous]
    },
    "_debugID": 0,
    "_hostContainerInfo": null,
    "_hostParent": null,
    "_instance":  {
      "_reactInternalInstance": [Circular],
      "context": Object {},
      "props": Object {
        "$$typeof": Symbol(react.element),
        "_owner": null,
        "_store": Object {},
        "key": null,
        "props": Object {},
        "ref": null,
        "type": [Function LoginLink]
      },
      "refs": Object {},
      "state": null,
      "updater": Object {
        "enqueueCallback": [Function anonymous],
        "enqueueCallbackInternal": [Function anonymous],
        "enqueueElementInternal": [Function anonymous],
        "enqueueForceUpdate": [Function anonymous],
        "enqueueReplaceState": [Function anonymous],
        "enqueueSetState": [Function anonymous],
        "isMounted": [Function anonymous],
        "validateCallback": [Function anonymous]
      }
    },
    "_mountImage": null,
    "_mountIndex": 0,
    "_mountOrder": 1,
    "_pendingCallbacks": null,
    "_pendingElement": null,
    "_pendingForceUpdate": false,
    "_pendingReplaceState": false,
    "_pendingStateQueue": null,
    "_renderedComponent":  {
      "_calledComponentWillUnmount": false,
      "_compositeType": 2,
      "_context": Object {},
      "_currentElement": Object {
        "$$typeof": Symbol(react.element),
        "_owner": null,
        "_store": Object {},
        "key": null,
        "props": Object {},
        "ref": null,
        "type": [Function LoginLink]
      },
      "_debugID": 1,
      "_hostContainerInfo": null,
      "_hostParent": null,
      "_instance": StatelessComponent {
        "_reactInternalInstance": [Circular],
        "context": Object {},
        "props": Object {},
        "refs": Object {},
        "state": null,
        "updater": Object {
          "enqueueCallback": [Function anonymous],
          "enqueueCallbackInternal": [Function anonymous],
          "enqueueElementInternal": [Function anonymous],
          "enqueueForceUpdate": [Function anonymous],
          "enqueueReplaceState": [Function anonymous],
          "enqueueSetState": [Function anonymous],
          "isMounted": [Function anonymous],
          "validateCallback": [Function anonymous]
        }
      },
      "_mountImage": null,
      "_mountIndex": 0,
      "_mountOrder": 2,
      "_pendingCallbacks": null,
      "_pendingElement": null,
      "_pendingForceUpdate": false,
      "_pendingReplaceState": false,
      "_pendingStateQueue": null,
      "_renderedComponent":  {
        "_currentElement": Object {
          "$$typeof": Symbol(react.element),
          "_owner": [Circular],
          "_store": Object {},
          "key": null,
          "props": Object {
            "children": "Log in",
            "href": "/auth/google"
          },
          "ref": null,
          "type": "a"
        },
        "_debugID": 2,
        "_mountImage": null,
        "_mountIndex": 0,
        "_renderedChildren": Object {
          ".0":  {
            "_currentElement": "Log in",
            "_debugID": 3,
            "_mountImage": null,
            "_mountIndex": 0
          }
        },
        "_topLevelWrapper": null
      },
      "_renderedNodeType": 0,
      "_rootNodeID": null,
      "_topLevelWrapper": [Circular],
      "_updateBatchNumber": null,
      "_warnedAboutRefsInRender": false
    },
    "_renderedNodeType": 1,
    "_rootNodeID": null,
    "_topLevelWrapper": null,
    "_updateBatchNumber": null,
    "_warnedAboutRefsInRender": false
  }
}
`;

[wdhorton]

Never mind, I wasn't calling toJSON(). :(

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.