Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jest snapshot testing fails for <img /> tag. #4991

Closed
ashok-sc opened this issue Nov 30, 2017 · 20 comments
Closed

Jest snapshot testing fails for <img /> tag. #4991

ashok-sc opened this issue Nov 30, 2017 · 20 comments

Comments

@ashok-sc
Copy link

ashok-sc commented Nov 30, 2017

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
Copy link
Member

cpojer commented Nov 30, 2017

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

@cpojer cpojer closed this as completed Nov 30, 2017
@ashok-sc
Copy link
Author

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
Copy link
Member

cpojer commented Nov 30, 2017

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
Copy link
Author

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
Copy link
Member

SimenB commented Nov 30, 2017

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

@ashok-sc
Copy link
Author

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
Copy link
Member

SimenB commented Nov 30, 2017

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
Copy link
Author

Here's what npm ls jest-mock prints:

├─┬ jest@21.3.0-beta.11
│ └─┬ jest-cli@21.3.0-beta.11
│   ├─┬ jest-config@21.3.0-beta.11
│   │ └─┬ jest-environment-node@21.3.0-beta.11
│   │   └── jest-mock@21.3.0-beta.11  deduped
│   ├─┬ jest-environment-jsdom@21.3.0-beta.11
│   │ └── jest-mock@21.3.0-beta.11
│   ├─┬ jest-runner@21.3.0-beta.11
│   │ ├─┬ jest-config@21.3.0-beta.11
│   │ │ ├─┬ jest-environment-jsdom@21.3.0-beta.11
│   │ │ │ └── jest-mock@21.3.0-beta.11  deduped
│   │ │ └─┬ jest-environment-node@21.3.0-beta.11
│   │ │   └── jest-mock@21.3.0-beta.11  deduped
│   │ └─┬ jest-util@21.3.0-beta.11
│   │   └── jest-mock@21.3.0-beta.11
│   ├─┬ jest-runtime@21.3.0-beta.11
│   │ ├─┬ jest-config@21.3.0-beta.11
│   │ │ ├─┬ jest-environment-jsdom@21.3.0-beta.11
│   │ │ │ └── jest-mock@21.3.0-beta.11  deduped
│   │ │ └─┬ jest-environment-node@21.3.0-beta.11
│   │ │   └── jest-mock@21.3.0-beta.11  deduped
│   │ └─┬ jest-util@21.3.0-beta.11
│   │   └── jest-mock@21.3.0-beta.11
│   └─┬ jest-util@21.3.0-beta.11
│     └── jest-mock@21.3.0-beta.11  deduped
└─┬ ts-jest@21.2.3
  ├─┬ jest-config@21.2.1
  │ ├─┬ jest-environment-jsdom@21.2.1
  │ │ └── jest-mock@21.2.0  deduped
  │ └─┬ jest-environment-node@21.2.1
  │   └── jest-mock@21.2.0  deduped
  └─┬ jest-util@21.2.1
    └── jest-mock@21.2.0

@SimenB
Copy link
Member

SimenB commented Nov 30, 2017

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 kulshekhar/ts-jest#380 might solve your issue

@ashok-sc
Copy link
Author

@SimenB what do you mean by being explicit?

Thanks for making a push to ts-jest!

@SimenB
Copy link
Member

SimenB commented Nov 30, 2017

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

@ashok-sc
Copy link
Author

Hmm, unfortunately still getting that error :(.

TypeError: val.getMockName is not a function.

Do you know what's actually happening here?

@SimenB
Copy link
Member

SimenB commented Nov 30, 2017

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
Copy link
Author

Ah I see. Ok will wait for that then.

@painkkiller
Copy link

Is it resolved? I use jest-mock@22.4.3 in my project and I still getting this error

@SimenB
Copy link
Member

SimenB commented Mar 31, 2018

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

@daviscabral
Copy link

@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
Copy link

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

@WangNingning1994
Copy link

@daviscabral Saved my life!!

@github-actions
Copy link

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 10, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants