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

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

例如

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

我如何用玩笑/酶测试onScroll事件-React.js

1 个答案: