Segmentation Fault when rendering 'react-player/lazy' with Jest & React Testing Library

[pjaws]

Be sure to search for your issue before opening a new one.

Current Behavior

Importing ReactPlayer from react-player/lazy causes a segmentation fault when rendered with @testing-library/react inside a Jest test.

Importing from react-player/vimeo does not produce the same issue.

Expected Behavior

:)

Steps to Reproduce

video.js

import PropTypes from 'prop-types';
// switching this to 'react-player/vimeo' will work
import ReactPlayer from 'react-player/lazy';

import { track } from 'utils/analytics';

const Video = ({ title, url, width, height }) => {
  const handleStart = () =>
    track('video_started', {
      video_title: title,
      video_url: url,
    });

  const handlePause = () =>
    track('video_paused', {
      video_title: title,
      video_url: url,
    });

  const handlePlay = () =>
    track('video_played', {
      video_title: title,
      video_url: url,
    });

  const handleProgress = ({ played, playedSeconds }) =>
    track('video_progress', {
      video_title: title,
      video_url: url,
      video_played: played,
      video_played_seconds: playedSeconds,
    });

  const handleEnded = () =>
    track('video_ended', {
      video_title: title,
      video_url: url,
    });

  return (
    <ReactPlayer
      className="react-player"
      url={url}
      config={{ vimeo: { title } }}
      onStart={handleStart}
      onPause={handlePause}
      onPlay={handlePlay}
      onProgress={handleProgress}
      onEnded={handleEnded}
      width={width}
      height={height}
      controls
    />
  );
};

export default Video;

video.spec.js

import { render } from '@testing-library/react';

import Video from 'components/video';

describe('Video', () => {
  it('matches the snapshot', () => {
    const { container } = render(
      <Video
        url="https://player.vimeo.com/video/457872455"
        title="example"
        width={970}
        height={546}
      />
    );

    expect(container).toMatchSnapshot();
  });
});

results in:

 RUNS  src/__tests__/pages/video-example.spec.js
[1]    2860 segmentation fault  node --expose-gc --trace-warnings ./node_modules/.bin/jest video-example

Environment

• URL attempting to play: https://player.vimeo.com/video/457872455
• Browser: jsdom
• Operating system: MacOS 11.6.2
• Node version: 16.13.0

[seisenreich]

Same problem here. As soon as I use "react-player/lazy" instead of "react-player/youtube" or "react-player" jest tests using react-testing-library fail with segmentation fault.

[babipal]

Same here.

[yashwant-dangi]

Is anyone able to find the solution to this?

[F3n67u]

Same here.

My solution is to replace react-player/lazy module with react-player in your jest setup file:

// Replace react-player/lazy with react-player
// Fix Segmentation Fault when using 'react-player/lazy' in tests
// Learn more: https://github.com/cookpete/react-player/issues/1391
jest.mock('react-player/lazy', () => {
  return jest.requireActual('react-player');
});

[AgustinJuarezN]

Having the same issue. I fixed it for now with @F3n67u solution but I was wondering if it will be fixed officially.

[sokolby]

Same. Importing ReactPlayer from react-player/youtube with light="/img/img.png" props causes a segmentation fault when rendered with @testing-library/react inside a Jest test, too.