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'

you can check here for more details

开玩笑的快照失败：val.getMockName不是一个函数

1 个答案: