Jest快照失败: val.getMockName不是一个函数

Question

我正在尝试为一个小的react组件设置一个快照，但是我一直收到以下错误

TypeError: val.getMockName is not a function

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

这是我的测试文件：

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()
})

这是组件

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

我设置了一个模拟文件夹

'use strict'

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

export default LazyLoad

Answer 1

只要使用字符串解析图像源，它将解决您的问题。

示例:在package.json中，我从

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

至

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

并在根目录中的__mocks__/fileMock.js中创建了一个包含以下内容的文件：

module.exports  =  'test-file-stub'

你可以在这里查看更多细节。