Как проверить событие onScroll с шуткой / энзимом - Reactjs - PullRequest
Новая
       8

Как проверить событие onScroll с шуткой / энзимом - Reactjs

0 голосов
/ 10 января 2020

Я новичок в тестировании и не могу понять, как тестировать мой компонент, мой onScrollMock не запускается с кодом ниже, я использую, шутка и энзим. пожалуйста, помогите.

Я не уверен, как подойти к условию внутри handleScroll, как тестовое покрытие указывает на эту функцию.

StoryCardList. js

 const handleScroll = (scrollEvent) => {
    const { scrollWidth, scrollLeft, clientWidth } = scrollEvent.target;
    const isRightEnd = scrollWidth - scrollLeft === clientWidth;
    setAnimation(isRightEnd);
  };

function overlay(id, heroImage) {
    return (
      <div
        key={id}
        className="story-card-list__overlay"
        style={{
          transition: `all ${transitionDuration}`,
          opacity: animate && '1',
          visibility: animate && 'visible',
          transitionDelay: animate && transitionTiming,
          bottom: !animate && '999px',
        }}
      >
        <StoryCard title="" heroImage={heroImage} />
        <div className="story-card-list__overlay-elements">
          <p className="story-card-list__overlay-elements__title">Continue watching story</p>
          <p className="story-card-list__overlay-elements__subtitle">Continue watching story</p>
          <StoriesMoreButton path="/story-list" />
        </div>
      </div>
    );
  }
  return (
    <div className="story-card-list" onScroll={(scrollEvent) => handleScroll(scrollEvent)}>
      {stories.map(({ id, title, heroImage }, index, sourceStories) => {
        if (index === stories.length - 1) {
          return lastStory(id, title, heroImage, index, sourceStories);
        }
        return renderStoryCards(id, title, heroImage, index, sourceStories);
      })}
    </div>
  );

тест 

  let wrapper: ShallowWrapper;

const setAnimationMock = jest.fn(() => true);
const onScrollMock = jest.fn();
const setState = jest.fn();
const useStateSpy = jest.spyOn(React, 'useState');
useStateSpy.mockImplementation((init) => [init, setState]);
  beforeEach(() => {
wrapper = shallow(
  <StoryCardList
    stories={stories}
    onScroll={onScrollMock}
    transitionDuration="2"
    transitionTiming="2"
    setAnimation={setAnimationMock}
    onClick={setAnimationMock}
    animate
  />
);
});


  it('should have scrollable div', () => {
const logSpy = jest.spyOn(console, 'log');
const mEvent = {
  target: {
    scrollWidth: 100,
    scrollLeft: 50,
    clientWidth: 50,
  },
};
wrapper.find('.story-card-list').simulate('scroll', mEvent);
expect(setAnimationMock).toBeCalledWith(true);
});

1 Ответ

1 голос
/ 13 января 2020

Вы должны использовать .simulate (event [, ... args]) => Self из enzyme.

Например

index.tsx: 

import React, { useState } from 'react';

export const StoryCardList = () => {
  const [animate, setAnimation] = useState(false);

  const handleScroll = (e) => {
    const { scrollWidth, scrollLeft, clientWidth } = e.target;
    const rightEnd = scrollWidth - scrollLeft === clientWidth;

    if (rightEnd) {
      setAnimation(true);
    } else {
      setAnimation(false);
    }
  };

  return (
    <div className="story-card-list" onScroll={(e) => handleScroll(e)}>
      story card list, animate: {animate ? 'animation enabled' : 'animation disabled'}
    </div>
  );
};

index.spec.tsx: 

import { StoryCardList } from './';
import React from 'react';
import { shallow, ShallowWrapper } from 'enzyme';

describe('59675724', () => {
  let wrapper: ShallowWrapper;
  beforeEach(() => {
    wrapper = shallow(<StoryCardList />);
  });
  afterEach(() => {
    jest.restoreAllMocks();
  });

  it('should enabled animation', () => {
    const mEvent = {
      target: { scrollWidth: 100, scrollLeft: 50, clientWidth: 50 },
    };
    wrapper.find('.story-card-list').simulate('scroll', mEvent);
    expect(wrapper.find('.story-card-list').text()).toEqual('story card list, animate: animation enabled');
  });

  it('should disabled animation', () => {
    const mEvent = {
      target: { scrollWidth: 100, scrollLeft: 50, clientWidth: 100 },
    };
    wrapper.find('.story-card-list').simulate('scroll', mEvent);
    expect(wrapper.find('.story-card-list').text()).toEqual('story card list, animate: animation disabled');
  });
});

Результаты модульных испытаний со 100% покрытием: 

 PASS  src/stackoverflow/59675724/index.spec.tsx (15.734s)
  59675724
    ✓ should enabled animation (26ms)
    ✓ should disabled animation (9ms)

-----------|----------|----------|----------|----------|-------------------|
File       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files  |      100 |      100 |      100 |      100 |                   |
 index.tsx |      100 |      100 |      100 |      100 |                   |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        18.313s

Исходный код: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/59675724

...