Jest snapshot failing: val.getMockName is not a function

Question

I'm trying to set up a snapshot for a small react component but I keep getting the following error

TypeError: val.getMockName is not a function

it('renders correctly', () => {
const wrapper = renderer.create(<Partners content={content} />).toJSON()
> 
expect(wrapper).toMatchSnapshot()
               ^
})

This is my test file:

import React from 'react'
import renderer from 'react-test-renderer'
import Partners from './index'
import { content } from '../../content/anywhere-everywhere'

jest.mock('react-lazy-load', () => 'LazyLoad')

it('renders correctly', () => {
  const wrapper = renderer.create(<Partners content={content} />).toJSON()
  expect(wrapper).toMatchSnapshot()
})

This is the component

import React from 'react'
import LazyLoad from 'react-lazy-load'

const Partners = ({ content }) => (
  <section className="partners">
    <h3>{content.partnersCopy}</h3>
    <div className="partners__slider">
      {content.partnerLogos.map((partnerLogo, index) => (
        <LazyLoad key={index}>
          <img src={partnerLogo.src} alt={partnerLogo.alt} />
        </LazyLoad>
      ))}
    </div>
  </section>
)

export default Partners

and i set up a mocks folder

'use strict'

const LazyLoad = jest.genMockFromModule('react-lazy-load')

export default LazyLoad

Result

Answer 1

Just resolve the image source with a string, it will resolve your issue.

Example: In package.json, I changed from

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

to

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

and created a file in __mocks__/fileMock.js in root directory with a content

module.exports  =  'test-file-stub'

you can check here for more details

Dineric

I have the same issue but it seems not working for me! – Frivol

Try to use wrapper.element. For example:expect(wrapper.element).toMatchSnapshot(). – Chainplate