snapshot tests fail with jest react-testing-library

[denis88k]

hi) I wrote a snapshot test for my component, but received a component with an error

my component:

import React, { FC, memo } from 'react'
import { IPlayerProps, Player } from '@lottiefiles/react-lottie-player'

enum RendererType {
  HTML = 'html',
  CANVAS = 'canvas',
  SVG = 'svg',
}

type Props = {
  src: string
  autoplay?: boolean
  className?: string
  renderer?: RendererType
   loop?: boolean
  'data-testid'?: string
} & IPlayerProps

const LottiePlayer: FC<Props> = ({
  src,
  loop = false,
  className,
  renderer = RendererType.SVG,
  autoplay = true,
  'data-testid': dataTestid= 'LottiePlayer',
  ...props
}) => (
  <div className={className} data-testid={dataTestid}>
    <Player
      {...props}
      src={src}
      autoplay={autoplay}
      loop={loop}
      renderer={renderer}
      className={className}
    />
  </div>
)

export default LottiePlayer

my test:

import React from 'react'
import LottiePlayer from './LottiePlayer'
import { render } from 'react-testing-library'

describe('LottiePlayer ', () => {
  it(`json animation`, () => {
      const dataTestid = 'LottiePlayer'

      const { getByTestId} = render(
        <LottiePlayer
          src="https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
          loop={true}
          data-testid={dataTestid }
        />
      )
      expect(getByTestId(dataTestid)).toMatchSnapshot()
    })
})

result test:

<div
  class=""
  data-testid="LottiePlayer"
>
  <div
    class="lf-player-container"
  >
    <div
      class="lf-error"
      style=""
    >
      <span
        aria-label="error-symbol"
        role="img"
      >
        ⚠️
      </span>
    </div>
  </div>
</div>

Based on the library code, I realized that such an error could occur if it was not possible to obtain the json file Maybe someone has tested this component, I can’t find any tests written in react-testing-library

[denis88k]

import React from 'react'
import { LottiePlayer } from '../index'
import Animation from './Animation.json' // animation json
import { render } from '@testing-library/react'

describe('LottiePlayer', () => {
  const src = 'https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json' // your link src animation json
  const dataTestid= 'LottiePlayer'

  beforeEach(() => {
    global.fetch = jest.fn().mockImplementation(() =>
      Promise.resolve({
        json: () => Promise.resolve(Animation),
      })
    ) as jest.Mock
  })

  afterEach(() => {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    global.fetch.mockRestore()
  })

  it('default player', async () => {
    const { findByDataTestid} = render(
      <LottiePlayer
        src={src}
        loop={true}
        data-testid={dataTestid}
      />
    )

    expect(await findByDataTestid(dataTestid)).toMatchSnapshot()
  })
})