如何为 React 中的功能组件编写 moveover 和 mouseleave 的 jest 测试用例？

Question

我是开玩笑测试用例的新手，我想为具有鼠标悬停和鼠标离开事件的 React 组件编写开玩笑测试用例。我不确定如何为这些事件编写测试用例。我已经完成了一个 stackoverflow 答案，它与我的要求非常相似如何使用酶模拟 div 上的鼠标悬停事件以测试反应应用程序？ 根据 stackoverflow 的回答，它是为类组件编写的，但我需要它用于功能组件。

代码如下：

import React, {useState} from "react";

export const SearchMenu = () => <input />;

const Toggle = () => {
  const[dropdownShown, setDropdownShown] = useState(false);

    return (
      <div
        className="search-type"
        onMouseOver={() => setDropdownShown(true)}
        onMouseLeave={() => setDropdownShown(false)}
      >
        <h1>Hover over me to hide/unhide the input</h1>
        {dropdownShown && <SearchMenu />}
      </div>
    );
}

export default Toggle;

测试用例：

import React from "react";
import { shallow } from "enzyme";
import Toggle from "./Toggle";
import Enzyme from "enzyme";
import { SearchMenu } from "./Toggle";

describe("Toggle Component", () => {
  it("check state", () => {
    const wrapper = shallow(<Toggle />);
    expect(wrapper.find(<SearchMenu />).exists).toBeTruthy();

    // Testing Initial State
    expect(wrapper.state("dropdownShown")).toBe(true);
    wrapper.simulate("mouseleave");

    // Testing state after mouseleave
    expect(wrapper.state("dropdownShown")).toBe(false);

    // Testing state after mouseover
    wrapper.simulate("mouseover");
    expect(wrapper.state("dropdownShown")).toBe(true);
  });
});

这里我得到错误ShallowWrapper::state() 只能在类组件上调用

任何人都可以帮助我如何在功能组件中编写这个测试用例？ 谢谢！提前

Answer 1

错误信息很清楚

函数式组件没有状态，也没有实例。

useState

与组件状态不同——React 管理它；它不直接与实例相关。

所以你可以测试触发鼠标事件时会渲染什么。

例如

Toggle.test.tsx

：

import React from 'react';
import { shallow } from 'enzyme';
import Toggle, { SearchMenu } from './Toggle';

describe('Toggle Component', () => {
  it('check state', () => {
    const wrapper = shallow(<Toggle />);

    // Testing Initial State
    expect(wrapper.find(SearchMenu).exists()).toBeFalse();

    // Testing state after mouseover
    wrapper.simulate('mouseover');
    expect(wrapper.find(SearchMenu).exists()).toBeTrue();

    // Testing state after mouseleave
    wrapper.simulate('mouseleave');
    expect(wrapper.find(SearchMenu).exists()).toBeFalse();
  });
});

测试结果：

 PASS  stackoverflow/75952818/Toggle.test.tsx (10.562 s)
  Toggle Component
    ✓ check state (29 ms)

------------|---------|----------|---------|---------|-------------------
File        | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
------------|---------|----------|---------|---------|-------------------
All files   |      90 |      100 |      75 |     100 |                   
 Toggle.tsx |      90 |      100 |      75 |     100 |                   
------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        11.354 s
Ran all test suites related to changed files.