Jest: Jest snapshot testing fails for <img /> tag.

[ashok-sc]

Reporting a BUG

What is the current behavior?
When running my test I get the following error:

  ● loading icon

    TypeError: val.entries is not a function

      at Object.<anonymous>.test (src/__tests__/core/components/loading.spec.tsx:12:26)
          at new Promise (<anonymous>)
          at <anonymous>

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.

This is the component I'm testing.

var image = require('../../public/assets/img/loading.svg');

export class LoadIcon extends Component {
    render() {
        return (
            <div className='loading-icon'>
                <img src={image} />
            </div>
        );
    }
}

Here's my test:

test('loading icon', () => {
    const loadingicon = renderer.create(
        <LoadingIcon />
    );
    expect(loadingIcon.toJSON()).toMatchSnapshot();
});

What is the expected behavior?
Create a snapshot and pass test.

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

Jest config:

  "jest": {
    "globals": {
      "ts-jest": {
        "skipBabel": true
      }
    },
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],
    "transform": {
      "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "testRegex": "/(__tests__)/.*\\.spec.(ts|tsx|js)$",
    "moduleNameMapper": {
      ".+\\.(css|styl|less|sass|scss|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "identity-obj-proxy"
    },
    "setupFiles": [
      "jest-fetch-mock",
      "jest-localstorage-mock",
      "./src/__tests__/__setups__/localstorage.ts"
    ]
  },

[cpojer]

This is not a proper bug report that allows us to reproduce your behavior.

[ashok-sc]

Hi @cpojer sorry my keyboard tabbed to the submit button and I submitted too early. I've edited and provided all details. Can you please re-open?

Thanks!

[cpojer]

It doesn't reproduce for me like that. Can you share a full example on repl.it that shows the breaking test? Thank you.

[ashok-sc]

I also updated the react component code above to show how I'm requiring the image. Can you try with an SVG?

I'll also try to create something on repl.it today.

[SimenB]

Same error as #4922, can you reproduce on latest jest beta? yarn add -D jest@test

[ashok-sc]

Ah nice catch @SimenB . I tried that and the error changes to:

TypeError: val.getMockname is not a function.

Also, FYI I'm using ts-jest.

[SimenB]

Huh, that means jest-mock is not the beta. I'm not sure what ts-jest does...

What does npm ls jest-mock return?

[ashok-sc]

Here's what npm ls jest-mock prints:

├─┬ [email protected]
│ └─┬ [email protected]
│   ├─┬ [email protected]
│   │ └─┬ [email protected]
│   │   └── [email protected]  deduped
│   ├─┬ [email protected]
│   │ └── [email protected]
│   ├─┬ [email protected]
│   │ ├─┬ [email protected]
│   │ │ ├─┬ [email protected]
│   │ │ │ └── [email protected]  deduped
│   │ │ └─┬ [email protected]
│   │ │   └── [email protected]  deduped
│   │ └─┬ [email protected]
│   │   └── [email protected]
│   ├─┬ [email protected]
│   │ ├─┬ [email protected]
│   │ │ ├─┬ [email protected]
│   │ │ │ └── [email protected]  deduped
│   │ │ └─┬ [email protected]
│   │ │   └── [email protected]  deduped
│   │ └─┬ [email protected]
│   │   └── [email protected]
│   └─┬ [email protected]
│     └── [email protected]  deduped
└─┬ [email protected]
  ├─┬ [email protected]
  │ ├─┬ [email protected]
  │ │ └── [email protected]  deduped
  │ └─┬ [email protected]
  │   └── [email protected]  deduped
  └─┬ [email protected]
    └── [email protected]

[SimenB]

Oh dear, jest-util depends on jest-mock... #4992

What happens if you're explicit about jest-mock in your own package.json?

A new beta (not released yet) plus https://github.com/kulshekhar/ts-jest/pull/380 might solve your issue

[ashok-sc]

@SimenB what do you mean by being explicit?

Thanks for making a push to ts-jest!

[SimenB]

Having "jest-mock": "21.3.0-beta.11" in your package.json to force that version to the top level

[ashok-sc]

Hmm, unfortunately still getting that error :(.

TypeError: val.getMockName is not a function.

Do you know what's actually happening here?

[SimenB]

npm/yarn probably hoists an old jest-mock. You'll have to wait for a new version of both jest and ts-jest I think.

[ashok-sc]

Ah I see. Ok will wait for that then.

[PainKKKiller]

Is it resolved? I use [email protected] in my project and I still getting this error

[SimenB]

Should be resolved, yes. If you're still having issues, please provide a reproduction

[daviscabral]

@PainKKKiller / @ashok-sc I was able to fix it changing this line in the package.json:

    "moduleNameMapper": {
      ".+\\.(css|styl|less|sass|scss|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "identity-obj-proxy"

To:

    "moduleNameMapper": {
      ".+\\.(css|styl|less|sass|scss)$": "identity-obj-proxy",

      ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"

And this is the content of fileMock.js:

// __mocks__/fileMock.js

module.exports = 'test-file-stub'

It seems that identity-obj-proxy is supposed to be used only for css/less files.

[theSupermacy]

Thank you for the support. This had saved few nights!!