用React-Testing库模拟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，然后测试中的模拟工作