TypeError: val.entries is not a function

[FezVrasta]

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

What is the current behavior?

 FAIL  src/FiltersPanel.spec.jsx
  ● renders the expected markup

    TypeError: val.entries is not a function

      at Object.<anonymous> (src/modules/common/filters-panel/components/FiltersPanel.spec.jsx:18:19)
          at new Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

  console.error console.js:182
    Trace
        at printImmutableEntries (/Users/federicozivolo/project/web/node_modules/pretty-format/build/plugins/immutable.js:40:11)
        at Object.<anonymous>.exports.serialize (/Users/federicozivolo/project/web/node_modules/pretty-format/build/plugins/immutable.js:180:12)
        at printPlugin (/Users/federicozivolo/project/web/node_modules/pretty-format/build/index.js:245:10)
        at printer (/Users/federicozivolo/project/web/node_modules/pretty-format/build/index.js:290:12)
        at keys.map.key (/Users/federicozivolo/project/web/node_modules/pretty-format/build/plugins/lib/markup.js:30:19)
        at Array.map (<anonymous>)
        at Object.<anonymous>.exports.printProps (/Users/federicozivolo/project/web/node_modules/pretty-format/build/plugins/lib/markup.js:28:3)
        at Object.<anonymous>.exports.serialize (/Users/federicozivolo/project/web/node_modules/pretty-format/build/plugins/react_element.js:57:24)
        at printPlugin (/Users/federicozivolo/project/web/node_modules/pretty-format/build/index.js:245:10)
        at printer (/Users/federicozivolo/project/web/node_modules/pretty-format/build/index.js:290:12)

  ✕ renders the expected markup (3ms)

  console.log src/modules/common/filters-panel/components/FiltersPanel.jsx:11

(the additional stack trace is added by me with a console.trace() placed in the problematic file)

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.

Just run this repository tests to get the error:
https://github.com/FezVrasta/jest-pretty-print-bug

 FAIL  src/demo.test.jsx
  ✕ crashes badly and hopelessy... (11ms)

  ● crashes badly and hopelessy...

    TypeError: val.entries is not a function

      at Object.<anonymous>.it (src/demo.test.jsx:7:155)
          at new Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

  console.log src/demo.test.jsx:6
    ShallowWrapper { length: 1 }

What is the expected behavior?

No errors pretty please 🙏

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

Look at the repository provided please.

[FezVrasta]

As workaround, I noticed that if I wrap the component (in the test file) inside a div everything works nicely.

wrapper = shallow(<div><Demo /></div>)

[SimenB]

/cc @pedrottimark

[pedrottimark]

@FezVrasta 2 things so far. First I am sure. Second is opportunity for us to learn together :)

First: By design, enzyme wrappers are not intended for snapshots. But there is a helper:

1. yarn add -D enzyme-to-json
2. In your test file: import toJson from 'enzyme-to-json';
3. In your assertion: expect(toJson(shallow(<Demo />))).toMatchSnapshot();

Second: It still fails with the same error as you reported. For reason that I do not yet understand, the value of the styles prop matches the test for the Immutable plugin, but it is not a Map.

However, in quick reading about react-css-modules package, I do not see any example in which rendered React elements have a styles prop whose value is the imported styles.

It describes a styles prop, see: https://github.com/gajus/react-css-modules#styles-property

The following change to the component:

export default CSS(
  function Demo({styles}) {
    return <div className={styles.Dummy} />;
  },
  styles,
  { allowMultiple: true }
);

Produces the following snapshot:

<div
  className="Dummy"
/>

But I have no idea if that change is a step closer to or farther from your goal :)

[FezVrasta]

Hey.

I haven't used enzyme-to-json just to avoid any additional dep in the repro

About "styles" property. It's documented as way to override the styles of an existing styled component.

Using styles property you can overwrite the default component styles object, e.g.

import customStyles from './table-custom-styles.css';

<Table styles={customStyles} />;

https://github.com/gajus/react-css-modules#extending-component-styles

[pedrottimark]

@FezVrasta Thank you for the sample project. Fixed by #4935

Here is an example of a shallow snapshot:

<Table styles={Object {}} />

For more information about identity-obj-proxy in Jest, see Mocking 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.