我如何通过玩笑/酶测试React onScroll事件-Reactjs

Question

我是测试新手，无法弄清楚如何测试我的组件，我的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);
});

Answer 1

您应使用.simulate(event[, ...args]) => Self的enzyme。

例如

index.tsx：

import React from 'react';

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

    if (rightEnd) {
      console.log(true);
    } else {
      console.log(false);
    }
  };

  return (
    <div className="story-card-list" onScroll={(e) => handleScroll(e)}>
      story card list
    </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 print true', () => {
    const logSpy = jest.spyOn(console, 'log');
    const mEvent = {
      target: {
        scrollWidth: 100,
        scrollLeft: 50,
        clientWidth: 50,
      },
    };
    wrapper.find('.story-card-list').simulate('scroll', mEvent);
    expect(logSpy).toBeCalledWith(true);
  });

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

具有100％覆盖率的单元测试结果：

 PASS  src/stackoverflow/59675724/index.spec.tsx (11.638s)
  59675724
    ✓ should print true (18ms)
    ✓ should print false (2ms)

  console.log node_modules/jest-mock/build/index.js:860
    true

  console.log node_modules/jest-mock/build/index.js:860
    false

-----------|----------|----------|----------|----------|-------------------|
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:        13.781s, estimated 14s

源代码：https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/59675724