如何使用 Jest 和 ReactJs 测试 onClose 道具答案

【问题标题】：How to test onClose prop with Jest and ReactJs如何使用 Jest 和 ReactJs 测试 onClose 道具
【发布时间】：2021-07-05 16:32:46
【问题描述】：

我有一个看起来像这样的组件，当单击按钮时会打开一个模态，当单击 X 按钮时，按下鼠标或按下 esc 键模态关闭并调用 onClose 函数，但是，Jest 报告说 @987654323 @ 未被覆盖。

const MyComponent = () => {
  const [isOpen, setIsOpen] = useState(false);
 
  return (
    <div className="container">
          <button
            onClick={() => {
              setIsOpen(true);
            }}
          />
      <Flow
        isOpen={isOpen}
        onClose={() => {
          setIsOpen(false);
        }}
      />
    </div>
  );
};

如何测试setIsOpen(false); 是否被调用？我尝试模拟 useState 并检查它是否被调用，但是，这弄乱了按钮中的 setIsOpen(true);，作为模拟，模态将无法打开。

有什么想法吗？

【问题讨论】：

> 如何测试 setIsOpen(false);？你不应该。看到这个答案：stackoverflow.com/questions/60137762/…
谢谢@Suver1 我正在尝试验证是否正在调用它，而不是尝试检查状态的值

标签： javascript reactjs jestjs react-hooks

【解决方案1】：

我将使用Enzyme 来测试 react 组件的行为。

Enzyme 是一个用于 React 的 JavaScript 测试实用程序，可以更轻松地测试 React 组件的输出

您可以使用浅包装器的.invoke(invokePropName)(...args) => Any 来调用Flow 组件的onClose() 方法。

例如

MyComponent.tsx:

import React, { useState } from 'react';
import { Flow } from './Flow';

export const MyComponent = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="container">
      <button
        onClick={() => {
          setIsOpen(true);
        }}
      />
      <Flow
        isOpen={isOpen}
        onClose={() => {
          setIsOpen(false);
        }}
      />
    </div>
  );
};

Flow.tsx

import React from 'react';
export function Flow({ isOpen, onClose }) {
  if (!isOpen) return null;
  return <div onClick={onClose}>close</div>;
}

MyComponent.test.tsx:

import React from 'react';
import { shallow } from 'enzyme';
import { MyComponent } from './MyComponent';
import { Flow } from './Flow';

describe('67027129', () => {
  it('should set open to true', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find(Flow).prop('isOpen')).toBeFalsy();
    wrapper.find('button').simulate('click');
    expect(wrapper.find(Flow).prop('isOpen')).toBeTruthy();
  });

  it('should set open to false', () => {
    const wrapper = shallow(<MyComponent />);
    wrapper.find('button').simulate('click');
    expect(wrapper.find(Flow).prop('isOpen')).toBeTruthy();
    wrapper.find(Flow).invoke('onClose')();
    expect(wrapper.find(Flow).prop('isOpen')).toBeFalsy();
  });
});

单元测试结果：

 PASS  examples/67027129/MyComponent.test.tsx (10.173 s)
  67027129
    ✓ should set open to true (37 ms)
    ✓ should set open to false (19 ms)

-----------------|---------|----------|---------|---------|-------------------
File             | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------------|---------|----------|---------|---------|-------------------
All files        |   76.92 |        0 |      75 |   81.82 |                   
 Flow.tsx        |      40 |        0 |       0 |      50 | 3-4               
 MyComponent.tsx |     100 |      100 |     100 |     100 |                   
-----------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        10.908 s, estimated 13 s

【讨论】：