Jest: Tests fail only with `--coverage`

[mrmckeb]

This may be a bug with our configuration, but so far I can't see anything that would be causing it.

We're using kyt, and have enjoyed using Jest with Enzyme for testing. jest and jest --watch work perfectly. However, _some_ tests fail (I can't see a pattern) when running jest --coverage when they work fine otherwise.

It seems that the failing tests all suffer from the same issue, that the component isn't actually being created / is empty. Example errors:

• Method “html” is only meant to be run on a single node. 0 found instead.
• Method “props” is only meant to be run on a single node. 0 found instead.
• expect(received).toBe(expected) -- Expected value to be (using ===): 3 -- Received: 0 (looking the number of components expected under certain conditions).

My expectation is that test --coverage doesn't do anything differently than test and test --watch... but I could be wrong, and as mentioned, I realise this could be something we've done wrong.

Node v6.9.0 / npm v3.10.8
Jest v16.0.1 (running with jsdom as the test environment)
Enzyme v2.4.1

An example of a full failure:

 FAIL  components/views/Account/MyComponent/index.test.js
  ● Should render two buttons

    expect(received).toBe(expected)

    Expected value to be (using ===):
      2
    Received:
      0

      at Object.<anonymous> (components/views/Account/MyComponent/index.test.js:12:40)
      at handle (../node_modules/worker-farm/lib/child/index.js:41:8)
      at process.<anonymous> (../node_modules/worker-farm/lib/child/index.js:47:3)
      at emitTwo (../events.js:106:13)
      at process.emit (../events.js:191:7)
      at process.nextTick (../internal/child_process.js:744:12)
      at _combinedTickCallback (../internal/process/next_tick.js:67:7)
      at process._tickCallback (../internal/process/next_tick.js:98:9)

Any help or pointers would be greatly appreciated.

[victorhqc]

This is also affecting me, though in my case its failing with snapshots. If I run npm test it works just fine, but if I add the --coverage flag it fails.

<Image /> › Should render a fallback image when it fails loading

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot 1.

    - Snapshot
    + Received

      <div
        className="image-wrapper"
        style={
          Object {
            "height": "250",
            "width": "300",
          }
        }>
        <div
          className="image-fallback fallback-small">
          <function SvgIcon() {_classCallCheck(this, SvgIcon);return _possibleConstructorReturn(this, (SvgIcon.__proto__ || Object.getPrototypeOf(SvgIcon)).apply(this, arguments));}
            className="fallback-icon"
            glyph="some_mocked_file" />
        </div>
    -   <function ImageView() {_classCallCheck(this, ImageView);return _possibleConstructorReturn(this, (ImageView.__proto__ || Object.getPrototypeOf(ImageView)).apply(this, arguments));}
    +   <function ImageView() {/* istanbul ignore next */++cov_1drc2k6ou6.f[10];++cov_1drc2k6ou6.s[38];_classCallCheck(this, ImageView); /* istanbul ignore next */++cov_1drc2k6ou6.s[39];return _possibleConstructorReturn(this, ( /* istanbul ignore next */(++cov_1drc2k6ou6.b[15][0], ImageView.__proto__) || /* istanbul ignore next */(++cov_1drc2k6ou6.b[15][1], Object.getPrototypeOf(ImageView))).apply(this, arguments));}
          aspect={undefined}
          className="image"
          height="250"
          size="14x14"
          src=""
          width="300" />
      </div>

      at Object.<anonymous> (app/components/controls/items/Image/Component.test.jsx:47:30)

[cpojer]

I think the problem is in how istanbul wraps functional components, there isn't much we can do about it. Are you using enzyme-to-json? That might be the problem.

[mrmckeb]

HI @cpojer, we still haven't figured out how to get around this... I might try refactoring all of our functional components to components, extending PureComponent and see if that helps.

We're not using enzyme-to-json.

Sorry for the slow reply!

[cpojer]

Can you try to update Jest? We published a patch to pretty-format that should fix this.

[alphashuro]

what is the news on this? I can't update jest because i'm at the mercy of create-react-app

[victorhqc]

@cpojer it works, thank you :) Had to remove all my previous snapshots and regenerate them by re running the tests

[Velinsky]

I'm having the same problem as described, on different piece of code. Updating babel-jest and jest to version 17 did not help.

[ChrisCooney]

Same here! Moving to latest version (17.0.3) didn't fix the issues for us.

[nWhitehill]

V17.0.3 did not fix it for us either. Is there anyway we can re-open this bug to get more attention to it / re-investigate?

[sapegin]

Have similar failure in one of my tests:

…
    Received value does not match stored snapshot 1.

    - Snapshot
    + Received
…
    -        <ToolbarButton
    +        <Component
…

I was able to fix it by replacing an arrow function component with a regular function:

-const ToolbarButton = (props) => (
-    <Button
-        {...props}
-        bsStyle="link"
-        bsSize="small"
-        gray
-    />
-);
+function ToolbarButton(props) {
+    return (
+        <Button
+            {...props}
+            bsStyle="link"
+            bsSize="small"
+            gray
+        />
+    );
+}

[cpojer]

The problem here is the istanbul coverage transform which makes functions anonymous when it shouldn't :(

See https://github.com/istanbuljs/babel-plugin-istanbul/issues/63

[Velinsky]

We have noticed, that tests are working with coverage on Windows, but when we run them on Mac, those that are using Enzyme / SkinDeep (for children component traversal) are failing.

So Windows is ok, but Mac for some reason fails.

[cpojer]

@Velinsky are you using the same version of node?

[Velinsky]

@cpojer yes, node 6.6.0 with jest 17.0.2

[cpojer]

Can you share the differences? It seems like your snapshot may include some some platform specific data.

[funwithtriangles]

npm i babel-plugin-istanbul@next fixed a similar issue for me.

There has been more development over at the thread @cpojer shared:
https://github.com/istanbuljs/babel-plugin-istanbul/issues/63#issuecomment-270025161

[esphen]

For the record, I had this issue with my tests failing, but only when using --coverage. I solved it by using find with a reference to the component instead of a string:

import SomeComponent from 'components/SomeComponent';

it('should do something cool', () => {
   const tree = shallow(<OtherComponent />);

  const comp = tree.find('SomeComponent').dive(); // Fails
  const comp = tree.find(SomeComponent).dive(); // Works
});

I believe this has to do with Istanbul removing the name of the component, which causes the find to not find anything, after which any assertions done against it will fail. References work because they don't rely on Sstanbul keeping any names

[Gyvastis]

Updating jest-cli solved the issue.