Jest: Snapshot with instrumentation code in it??

[kentcdodds]

Do you want to request a _feature_ or report a _bug_?

Bug

What is the current behavior?

My snapshots have code and istanbul annotations in them... I can't explain it. I've dug for a few hours... Not sure what's going on. I'm using enzyme + enzyme-to-json by @trayio and it's just the weirdest thing...

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal repository on GitHub that we can npm install and npm test.

You can clone this repo (note the help/weird-stuff branch). Then run npm run setup which will install all deps and run the validate script. Then open exercises-final/containers and you'll see all the relevant stuff in there.

What is the expected behavior?

It should be formatted nicely and not have instrumentation code in the output. Should just be good-looking JSX

Run Jest again with --debug and provide the full configuration it prints. Please mention your node and npm version and operating system.

jest version = 15.1.1
test framework = jasmine2
config = {
  "coverageThreshold": {
    "global": {
      "branches": 100,
      "functions": 95,
      "lines": 100,
      "statements": 100
    }
  },
  "rootDir": "/Users/kdodds/Developer/react-jest-workshop",
  "name": "-Users-kdodds-Developer-react-jest-workshop",
  "setupFiles": [
    "/Users/kdodds/Developer/react-jest-workshop/node_modules/babel-polyfill/lib/index.js"
  ],
  "testRunner": "/Users/kdodds/Developer/react-jest-workshop/node_modules/jest-jasmine2/build/index.js",
  "scriptPreprocessor": "/Users/kdodds/Developer/react-jest-workshop/node_modules/babel-jest/build/index.js",
  "usesBabelJest": true,
  "preprocessorIgnorePatterns": [
    "/node_modules/"
  ],
  "automock": false,
  "bail": false,
  "browser": false,
  "cacheDirectory": "/var/folders/v3/gkts3ng93tl6lm5hy6qp78pm3kfkyl/T/jest",
  "colors": false,
  "coveragePathIgnorePatterns": [
    "/node_modules/"
  ],
  "coverageReporters": [
    "json",
    "text",
    "lcov",
    "clover"
  ],
  "globals": {},
  "haste": {
    "providesModuleNodeModules": []
  },
  "mocksPattern": "__mocks__",
  "moduleDirectories": [
    "node_modules"
  ],
  "moduleFileExtensions": [
    "js",
    "json",
    "node"
  ],
  "moduleNameMapper": {},
  "modulePathIgnorePatterns": [],
  "noStackTrace": false,
  "notify": false,
  "preset": null,
  "resetModules": false,
  "testEnvironment": "jest-environment-jsdom",
  "testPathDirs": [
    "/Users/kdodds/Developer/react-jest-workshop"
  ],
  "testPathIgnorePatterns": [
    "/node_modules/"
  ],
  "testRegex": "(/__tests__/.*|\\.(test|spec))\\.js$",
  "testURL": "about:blank",
  "timers": "real",
  "useStderr": false,
  "verbose": null,
  "watch": false,
  "cache": true,
  "watchman": true,
  "testcheckOptions": {
    "times": 100,
    "maxSize": 200
  }
}

• node: 6.5.0
• npm: 3.10.7

Thanks!

[cpojer]

This is really odd. Some other people reported this as well and I thought it was something they did wrong. Jest hasn't published a release in a while as we are working on 16 so I'm wondering if there is any change in istanbul or react that went out in a patch release that is causing this issue?

[kentcdodds]

That could be it I suppose. It seemed to happen when I started using enzyme + enzyme-to-json. If I use react-test-renderer things work just fine.

[cpojer]

It might be a bug in enzyme-to-json then?

[kentcdodds]

My guess is it has something to do with pretty-format either not getting the right arguments passed to it, or breaking something. I looked at enzyme-to-json and it looks like it's constructing the JSON properly. If I log out the JSON it's generating, it doesn't have any of this extra data...

[damusnet]

I'm having the same issue where jest runs fine, and jest --coverage fails with code coverage instrumentation finding itself mixed in the snapshot output. Also using enzyme-to-json.

It seems it only happens when there is a function passed as a prop.

[kentcdodds]

Sounds like it is a problem with enzyme-to-json somehow then... cc @trayio

[bsr203]

I got it for react-test-renderer as well, and I reported before this at https://github.com/facebook/jest/issues/1756

[adriantoine]

Hi,
Sorry I don't get notifications for @trayio mentions as it is my company, @bsr203 opened an issue on https://github.com/trayio/enzyme-to-json.

I'll have a look as soon as I can 🤔 (probably on monday, sorry)

[adriantoine]

A very similar issue has been raised here, so it's more likely to be an problem with enzyme-to-json than Jest.

I'm looking at it, you can probably close this bug, since one has been raised there on our repo.

[kentaromiura]

@adriantoine can you ensure you'll try with latest version of Jest?
The snapshot format has been changed now and function names have now been removed as explained here: http://facebook.github.io/jest/blog/2016/10/03/jest-16.html
I'm not sure this may fix the issue you are observing here, but it might provide less noise.

[adriantoine]

@kentaromiura yep, I have updated my tests to the latest Jest this morning.

[cpojer]

I think those are separate issues.

One is that toString() is called on a function before Jest even receives it.

The other is that our custom serialization format used to print function names. We don't invoke toString() there.

I'm wondering whether the issue here is that we have "functions" that don't identify themselves as functions or we might call toString on them inadvertently. I didn't yet have time to fully explore what is going on here and any help identifying or fixing the issue is appreciated.

[adriantoine]

I think I found where is the issue in enzyme-to-json. It puts the instrumentation code when a component is a direct child...

For example this won't work:

export class ClassWithDirectPure extends Component {
    render() {
        return (
            <BasicPure className="nested-pure">
                <span>{this.props.children}</span>
                <span className="empty"></span>
            </BasicPure>
        );
    }
}

But this will work:

export class ClassWithPure extends Component {
  render() {
    return (
      <div>
        <BasicPure className="nested-pure">
          <span>{this.props.children}</span>
          <span className="empty"></span>
        </BasicPure>
      </div>
    );
  }
}

I'm working on a fix.

[adriantoine]

I'm about to publish a fix for this issue (see https://github.com/trayio/enzyme-to-json/pull/16) @kentcdodds

[adriantoine]

@kentcdodds the fix is in [email protected], I have also opened a PR on your workshop repo with the new version of enzyme-to-json: https://github.com/kentcdodds/react-jest-workshop/pull/2

[kentcdodds]

Thanks! Though, I think that Jest no longer will include function names in 16.0.0 which means this shouldn't happen anymore anyway :-/

[bsr203]

@kentcdodds could be different. see comment above

[adriantoine]

I don't think this is related or could be fixed by Jest 16, it's an internal issue of enzyme-to-json, as far as I know. Jest 16 is no longer showing function names for callbacks. This bug is caused by this line where enzyme-to-json could set a function to the type attribute of the serialized json when the type is a component, instead of the component name.

Either way this shouldn't happen anymore 😛

[bsr203]

well. this is still happening for me with react-test-renderer without enzyme-to-json, and enzyme-to-json + enzyme (all latest release from today morning). I don't call toString and the component work fine in the browser. I will try to create a reproducible test case, or hope someone else find a scenario where it easy to reproduce.

[cpojer]

@adriantoine thanks for fixing it in enzyme-to-json.

@bsr203 if this is happening to you with react-test-renderer, please provide a repro.

[pedrottimark]

Here is a minimal reproducing case for the way I just saw this in a snapshot test of shallow-rendered output with TestUtils (no Enzyme). Maybe a false start? It almost worked :)

https://github.com/pedrottimark/jest-1780

see README.md and src/__snapshots__/shallow.test.js.snap

Forgot to mention: Node 7.2.0 and a snapshot with react-test-renderer works as expected.

[pedrottimark]

Correct output after I updated dependencies to react-scripts 0.8.1 and Jest 17.0.2

[pedrottimark]

@bsr203 Hello, how is it going? Is it still a problem with current versions of React and Jest?

It looks like the problem that you reported is the only one still unresolved on this issue.

Although your problem sounds different, upgrading dependencies solved my problem.

[bsr203]

Sorry, I havn't tried last few weeks, and the latest update might have solved it. Will try out and get back in couple of days. thanks.

[thymikee]

Closing as this looks like resolved now. Happy to reopen if the problem still exists for @bsr203

[bsr203]

@thymikee I can confirm that, it is solved for me with both react-test-renderer and enzyme-to-json. thanks.