mocking - 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

我设置了一个mocks文件夹

'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'

you can check here for more details