使用 React-Testing-Library 模拟 ArrowRight 事件

Question

我被这个 React-Testing-Library 困住了。我有两个组件：HeroesScreen 和 HeroesDiamondBar，当 stateVariable currentStep 大于 0 时，它们会在 HeroesScreen 内部呈现。我想在我的测试中模拟 arrowRight，以便至少显示一个 DiamondBar。

Heroes.jsx:

const HeroesScreen = ({ data, backgroundImage }) => {
 const [element, setElement] = useState();
 const [currentStep, setCurrentStep] = useState(0);

 const screenEl = useRef();

 const handler = (e) => {
   const nextScreen = e.key === 'PageDown' || e.key === 'ArrowRight';
   const prevScreen = e.key === 'PageUp' || e.key === 'ArrowLeft';

   if (nextScreen && currentStep < LAST_STEP) {
    e.stopPropagation();
    setCurrentStep(currentStep + 1);
  } else if (prevScreen && currentStep > 0) {
    e.stopPropagation();
    setCurrentStep(currentStep - 1);
  } else {
    setCurrentStep(0);
  }
};

useEffect(() => {
  screenEl.current.focus();
  setElement(screenEl.current);
}, []);

useKeys(element, handler);

return (
  <div
  className="heroes"
  style={{ backgroundImage: `url(${backgroundImage})` }}
  tabIndex="2"
  ref={screenEl}
>
  <div className="heroes__cover" data-testid="heroes">
    {heroesConfig.map((item, index) => {
      const cssIndex = index + 1;
      const { title, step1, dataId, filterProperty } = item;

      return (
        <Fragment key={`${title}-${cssIndex}`}>
          {currentStep >= step1 && (
            <HeroesDiamondBar
              photo={data[dataId][0].photo}
              name={data[dataId][0].name}
              points={data[dataId][0][filterProperty]}
              cssIndex={cssIndex}
              currentStep={currentStep}
              {...item}
            />
          )}
        </Fragment>
      );
    })}

   </div>
 </div>
);
};

HeroesScreen.propTypes = {
 data: PropTypes.object.isRequired,
 backgroundImage: PropTypes.string.isRequired,
};

export default HeroesScreen;

HeroesScreen.test.js:

import React from 'react';
import { render, screen, cleanup } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import HeroesScreen from '@screens/HeroesScreen/HeroesScreen';
import HeroesDiamondBarMock from '@components/HeroesDiamondBar/HeroesDiamondBar';

afterEach(cleanup);

jest.mock('@components/HeroesDiamondBar/HeroesDiamondBar', () => {
 let id = 0;
 return jest.fn(() => {
   return (
    <div data-testid={`heroes-diamond-bar-${++id}`}>Heroes Diamond Bar</div>
  );
 });
});

const props = {
 data: {
  rare: [
  {
    name: 'Name 1',
    points: '4500',
    photo: 'img url',
  },
]
 },
 backgroundImage:
  'bg img',
};

describe('<HeroesScreen />', () => {
 test('renders a <HeroesDiamondBar /> component with data props', async () => {
   const { getAllByTestId, getByTestId } = render(<HeroesScreen {...props} />);

   await userEvent.type(getByTestId('heroes'), '{arrowright}');

   expect(getAllByTestId(/heroes-diamond-bar/)).not.toBeNull();
 });
});

Answer 1

解决方案是将 data-testid="heroes" 移动到父 div，然后在测试中进行模拟

使用 React-Testing-Library 模拟 ArrowRight 事件

Simulating ArrowRight event with React-Testing-Library

javascript

reactjs

jestjs

react-testing-library