Testing with jest.

This issue has been tracked since 2017-09-06.

Any ideas how to test it shallow-ly with jest?

I am trying to invoke scrollTo event on window, but that does not seems to have any effect.

https://gist.github.com/jmacioszek/85fdd1b1eda9fe7f5f1664bd127af936

results in:

https://gist.github.com/jmacioszek/7c7c111e8e40477b897c1abcf26a0310

Component defined as follows:

https://gist.github.com/jmacioszek/aafd7650f36e80c7312c037622c89a64

Appreciate any help, thanks.

jasonslyvia wrote this answer on 2017-10-18

I'm not familiar with jest, so that will be a tough one, even react-lazyload itself is using real DOM environment to do the testing.

thescientist13 wrote this answer on 2017-11-21

I have a similar question. I'm lazy loading an image like so

<LazyLoad height={233}>
  <img className="card-img" src={ this.props.imgSource } alt={ this.props.imgAlt } />
</LazyLoad>

Trying to get a reference to the image tag in a test

it('should test image and image alt display correctly', () => {
  const img = card.find('img.card-img');
  console.log('img', img);  // img ReactWrapper { length: 0 }

  expect(img.prop('src')).toEqual(mockCardContent.group.group_photo);
  expect(img.prop('alt')).toEqual(mockCardContent.name);
});

And shows this error in the terminal

  ● Card component › Card elements when all values are provided › should test image and image alt display correctly

    Method “props” is only meant to be run on a single node. 0 found instead.

      at ReactWrapper.single (node_modules/enzyme/build/ReactWrapper.js:1532:17)
      at ReactWrapper.props (node_modules/enzyme/build/ReactWrapper.js:889:21)
      at ReactWrapper.prop (node_modules/enzyme/build/ReactWrapper.js:1074:21)
      at Object.<anonymous> (src/components/card/card.spec.jsx:50:18)
      at process._tickCallback (internal/process/next_tick.js:109:7)

Any thoughts? Is the <img> tag being hidden?

Thanks for this great lib, it's totally helping me out with my Lighthouse Performance score! 😊 🍀

thescientist13 wrote this answer on 2017-11-24

I thought maybe using forceCheck from within my jest it block would help, but alas that didn't work.

thescientist13 wrote this answer on 2017-11-25

Found a way to test for nested components within <LazyLoad>

<div className="lazyload-wrapper">
  <LazyLoad height={233} offset={50} once>
    <CSSTransitionGroup key="1"
      transitionName="fade"
      transitionAppear
      transitionAppearTimeout={600}
      transitionEnter={false}
      transitionLeave={false}>
      { Card.generateImage(this.props.imgSource, this.props.imgAlt) }
    </CSSTransitionGroup>
  </LazyLoad>
</div>
it('should test there is a lazily loaded image with a 600ms fade in', () => {
  const lazyLoad = card.find('LazyLoad');
  const cssTransitionGroup = lazyLoad.props().children;
  const img = cssTransitionGroup.props.children;

  expect(lazyLoad.length).toEqual(1);

  expect(cssTransitionGroup.type.displayName).toEqual('CSSTransitionGroup');
  expect(cssTransitionGroup.props.transitionName).toEqual('fade');
  expect(cssTransitionGroup.props.transitionAppear).toEqual(true);
  expect(cssTransitionGroup.props.transitionAppearTimeout).toEqual(600);
  expect(cssTransitionGroup.props.transitionEnter).toEqual(false);
  expect(cssTransitionGroup.props.transitionLeave).toEqual(false);

  expect(img.type).toEqual('img');
  expect(img.props.src).toEqual(mockCardContent.group.group_photo);
  expect(img.props.alt).toEqual(mockCardContent.name);
});
ahmadsaeed90 wrote this answer on 2018-11-28

I am trying to test my component with jest but it seems that lazyloaded components never gets created. When debugging, all i can see is placeholders rendered. Do i need to do something to triggered lazyload inside test?

stolinski wrote this answer on 2020-03-19

@ahmadsaeed90 did you ever solve this issue?

ahmadsaeed90 wrote this answer on 2020-03-19

@stolinski actually I was facing many issues with this component and ended up using https://github.com/joshwnj/react-visibility-sensor

ntsim wrote this answer on 2020-06-29

For anyone stumbling on this, you can get around this issue by using the forceVisible function.

Besides this, it doesn't really seem possible to test any lazy loading behaviour on scroll events. I think this is just a fundamental limitation of jsdom (which Jest uses under-the-hood). The only real way to do this kind of testing would be to use a browser-based test runner like Karma.

ameerthehacker wrote this answer on 2020-06-29

Totally agree with @ntsim

ameerthehacker wrote this answer on 2020-06-29

closing this issue, feel free to reopen if you face any more issues

jp3492 wrote this answer on 2020-12-09

@ntsim What forceVisible function are you talking about?

ntsim wrote this answer on 2020-12-09

@ntsim What forceVisible function are you talking about?

https://github.com/twobin/react-lazyload#forcevisible

cyberdelphos wrote this answer on 2021-06-11

For anyone stumbling on this, you can get around this issue by using the forceVisible function.

Besides this, it doesn't really seem possible to test any lazy loading behaviour on scroll events. I think this is just a fundamental limitation of jsdom (which Jest uses under-the-hood). The only real way to do this kind of testing would be to use a browser-based test runner like Karma.

@ntsim How do you make it work? I'm putting it inside my test but it doesn't do a thing... (My tests use redux and routes.)

ntsim wrote this answer on 2021-06-11

@ntsim How do you make it work? I'm putting it inside my test but it doesn't do a thing... (My tests use redux and routes.)

Should be able to call forceVisible in your test before asserting that the lazy-loaded component has rendered. If it doesn't render, you probably have something else going on with your test code that means it's not appearing 🤷‍♂️

devdpontes wrote this answer on 2021-06-21

@cyberdelphos

You can also mock Lazyload in the test.

jest.mock('react-lazyload', () => props => (
  <div id="LazyLoad" {...props} />
))
mrpineapples wrote this answer on 2021-10-01

@cyberdelphos

You can also mock Lazyload in the test.

jest.mock('react-lazyload', () => props => (
  <div id="LazyLoad" {...props} />
))

Just in case anyone is running into a similar issue still. This still wasn't rendering anything for me so I had to make a minor tweak:

jest.mock('react-lazyload', (props) => ( // notice just one function here now
  <div id="LazyLoad" {...props} />
))
More Details About Repo
Owner Name twobin
Repo Name react-lazyload
Full Name twobin/react-lazyload
Language JavaScript
Created Date 2015-08-07
Updated Date 2022-11-29
Star Count 5639
Watcher Count 52
Fork Count 482
Issue Count 153

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date