Snapshot test with coverage flag

[KyKyPy3]

When tested using Jest snapshots i observe different behaviour when I run the tests with --coverage flag or without.

With coverage flag i get Component in first child

Without coverage flag i get true React component ModalHeader

jest configuration:

jest version = 16.0.0
test framework = jasmine2
config = {
"collectCoverageFrom": [
"app/*/.{js,jsx}",
"!app/app.js",
"!app/routes.js"
],
"moduleDirectories": [
"node_modules",
"/Users/romario/Projects/work/imtm/app"
],
"moduleNameMapper": [
[
"..css$",
"/Users/romario/Projects/work/imtm/mocks/cssModule.js"
],
[
"..jpg|..png$",
"/Users/romario/Projects/work/imtm/mocks/image.js"
]
],
"setupTestFrameworkScriptFile": "/Users/romario/Projects/work/imtm/internals/testing/test-bundler.js",
"testRegex": "tests/..test.js$",
"rootDir": "/Users/romario/Projects/work/imtm",
"name": "-Users-romario-Projects-work-imtm",
"setupFiles": [
"/Users/romario/Projects/work/imtm/node_modules/babel-polyfill/lib/index.js"
],
"testRunner": "/Users/romario/Projects/work/imtm/node_modules/jest-jasmine2/build/index.js",
"scriptPreprocessor": "/Users/romario/Projects/work/imtm/node_modules/babel-jest/build/index.js",
"usesBabelJest": true,
"automock": false,
"bail": false,
"browser": false,
"cacheDirectory": "/var/folders/zb/cdw729m57bg8thqz6f863w3c0000gn/T/jest",
"clearMocks": false,
"coveragePathIgnorePatterns": [
"/node_modules/"
],
"coverageReporters": [
"json",
"text",
"lcov",
"clover"
],
"globals": {},
"haste": {
"providesModuleNodeModules": []
},
"mocksPattern": "mocks",
"moduleFileExtensions": [
"js",
"json",
"jsx",
"node"
],
"modulePathIgnorePatterns": [],
"noStackTrace": false,
"notify": false,
"preset": null,
"preprocessorIgnorePatterns": [
"/node_modules/"
],
"resetModules": false,
"testEnvironment": "jest-environment-jsdom",
"testPathDirs": [
"/Users/romario/Projects/work/imtm"
],
"testPathIgnorePatterns": [
"/node_modules/"
],
"testURL": "about:blank",
"timers": "real",
"useStderr": false,
"verbose": null,
"watch": false,
"cache": true,
"watchman": true,
"testcheckOptions": {
"times": 100,
"maxSize": 200
}
}

[adriantoine]

Hi @KyKyPy3! Thanks for raising the issue, I will have a look as soon as I can.

Can you tell me which version of enzyme-to-json you are using? I wouldn't be surprised if this happens in v1.1.2 but I think I fixed most of these in the latest v1.1.3 version.

[KyKyPy3]

I try to use 1.1.3 and version build from master branch.

[adriantoine]

@KyKyPy3 any news? Are you trying the latest version?

[KyKyPy3]

Yes, the situation has not changed

[camjc]

Looks like the issue is related to this one
enzymejs/enzyme#611

[ismay]

I'm running into the same problem, see here: enzymejs/enzyme#640 (comment). I'm using enzyme-to-json 1.3.0, enzyme 2.5.1 and jest 16.0.2

[ryanewing]

Is this in any way related to jamiebuilds/pretty-format@9214857 ?

[johnthepink]

@ryanewing I updated to pretty-format@4.2.2 and it didn't fix the issue for me.

[adriantoine]

Is it possible for someone to create a small repo which replicates this issue?

[ismay]

I've tried, but I'm not able to replicate the issue currently. If I run into it again I'll create an example repo.

[ismay]

Ok, I was able to replicate it. The snapshots were created with jest --watch (and then u to update the snapshots). If I then run jest --coverage it fails in this manner:

  ● <Root /> › renders correctly

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot 1.

    - Snapshot
    + Received

    <BrowserRouter>
    -   <App />
    +   <Component />
      </BrowserRouter>

      at Object.<anonymous> (src/containers/__tests__/Root.test.jsx:13:82)

Results are the same locally and remotely.

• CI build here: https://gitlab.com/ismay/enzyme-to-json-example/builds/6074425
• Example repo here: https://gitlab.com/ismay/enzyme-to-json-example

[guijesuis]

i have the same issue on my current project. I identified it, as being a miss recognition on component written with lambda (example bellow) that has been instrumented by Istanbul.

 const Root = () =>
   (<Router>
     <App />
   </Router>);

It can be solved by writing using the following syntaxe.

 function Root () {
   return (<Router>
     <App />
   </Router>);
}

But i would prefer if we could fix it.

Is there someone working on it? should i give it a try (may be this week end)?

[adriantoine]

Thanks for your reports! I'll have a look when I have time

[camjc]

For what its worth it appears to effect https://github.com/rogeliog/jest-serializer-enzyme as well, so I guess the fix should be somewhere upstream but I don't know where. Would be great to have a fix :|

[ismay]

Maybe this is related? gotwarlost/istanbul#699

[adriantoine]

Hi! I'm very late on this issue! I tried running @ismay's example repo, but as far as I can see, it's not related to enzyme-to-json. A quick way to find out is that I tried running:

console.log(wrapper.debug());

in the test and it shows the same component name as the Snapshot:

Debug output:
<BrowserRouter>
  <Component />
</BrowserRouter>

Snapshot:
exports[`<Root /> renders correctly 1`] = `
<BrowserRouter>
  <Component />
</BrowserRouter>
`;

The thing is that I'm just using Enzyme wrappers here to generate snapshots but I can't do more than Enzyme, if the output of .debug() is wrong, enzyme-to-json will be wrong too and it's more likely to be an issue with Enzyme, or Jest, or Istanbul in this case. As @ismay pointed out here, the issue only occurs when the coverage flag is on.

[ismay]

Yeah it's actually a problem with istanbul: #19 (comment)

[MoonTahoe]

Until there is a fix on this issue from istanbul...

I found this problem occurs with stateless functional components. You can get the same results with or without coverage in your snapshot tests by setting the .displayName property on stateless functional components.

const MyComponent = () => <div></div>
MyComponent.displayName = "MyComponent"

[tomchentw]

@ismay: Yeah it's actually a problem with istanbul:

Exactly!

I've recently encountered this issue and I tried to fix it on the istanbul side. I forked babel-plugin-istanbul to fix this, and I put my discovery in here:

istanbuljs/babel-plugin-istanbul#125

Could you folks let me know what you think about my proposal?