Snapshot failing with val.forEach is not a function

[FezVrasta]

Do you want to request a feature or report a bug?

bug

What is the current behavior?

So, I'm upgrading my project from an older version of Enzyme 2.x to Enzyme 3.x, keeping React 15.

I'm using enzyme-to-json to create snapshots tests in Jest, I upgraded it to 3.x as well to work with Enzyme 3.x

The problem I'm noticing is that some snapshot tests fail because of this error:

TypeError: val.forEach is not a function

I tracked this down to pretty-format, inside the printImmutable.js file.

Basically, here it expects val to be an array, but an empty object is provided:

val.forEach((item, key) => // line 84 of the compiled lib

The output from enzyme-to-json looks like this:

    {
      "type": "div",
      "props": {
        "className": "ButtonGroup"
      },
      "children": [
        {
          "type": "Button",
          "props": {
            "styles": {},
            "importance": "primary",
            "size": "regular",
            "className": "Button--active Button--first Button--last",
            "key": ".$0/.0"
          },
          "children": null
        }
      ]
    }

And it looks good to me, but I think I'm missing something...

Now, why does it happen?

p.s. actually I'm not sure if this is an Enzyme bug or a Jest one...

ps. 2:

This is my component (simplified):

import React, { cloneElement } from 'react';
import CSSModules from 'react-css-modules';
import styles from './index.css';

function ButtonGroup({ children, ...props }) {
  return (
    <div styleName="ButtonGroup" {...props}>
      {Children.map(children, (child, key) => {
        return cloneElement(child, { key, styles });
      })}
    </div>
  );
}

export default CSSModules(ButtonGroup, styles);

If the current behavior is a bug, please provide the steps to reproduce and either a repl.it demo through https://repl.it/languages/jest or a minimal repository on GitHub that we can yarn install and yarn test.

It depends by Enzyme, probably enzyme-to-json and Jest.

What is the expected behavior?

The Jest snapshot should work ust fine

Please provide your exact Jest configuration and mention your Jest, node, yarn/npm version and operating system.

It's a basic create-react-app application, with Enzyme 3.x

[pedrottimark]

Can you please paste output of npm ls pretty-format so we study the relevant version

[FezVrasta]

└─┬ react-scripts@1.0.14
  └─┬ jest@20.0.4
    └─┬ jest-cli@20.0.4
      ├─┬ jest-config@20.0.4
      │ ├─┬ jest-matcher-utils@20.0.3
      │ │ └── pretty-format@20.0.3  deduped
      │ ├─┬ jest-validate@20.0.3
      │ │ └── pretty-format@20.0.3  deduped
      │ └── pretty-format@20.0.3
      ├─┬ jest-jasmine2@20.0.4
      │ └─┬ jest-diff@20.0.3
      │   └── pretty-format@20.0.3  deduped
      └─┬ jest-snapshot@20.0.3
        └── pretty-format@20.0.3  deduped

I actually managed to avoid the error getting rid of the code that assigned styles to the cloned component.

I'm not sure why it failed when I passed that property down... I guess it has to do with react-css-modules.

[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.