开玩笑 - 反应 - 如何比较包含“Function onClick”的渲染输出答案

【问题标题】：Jest - react - how to compare a rendered output that includes "Function onClick"开玩笑 - 反应 - 如何比较包含“Function onClick”的渲染输出
【发布时间】：2022-04-10 03:52:18
【问题描述】：

当我有

expect(result.toJSON())
.toEqual(<button className="btn btn-prev" onClick="{[Function onClick]}" type="button">Prev</button>);

它很接近但不太正确 - 只是缺少Function onClick：

expect(received).toEqual(expected) // deep equality
- Expected
+ Received

  <button
    className="btn btn-prev"
-   onClick="{[]}"
+   onClick={[Function onClick]} // <--- the difference, Function onClick is missing
    type="button"
  >
    Prev
  </button>

但是，如果我尝试添加缺少的“Function onClick”，即

expect(result.toJSON())
.toEqual(<button className="btn btn-prev" onClick="{[Function onClick]}" type="button">Prev</button>);

我明白了

-   onClick="{[Function onClick]}"
+   onClick={[Function onClick]}

如果我删除引号，我会在 onClick 处收到解析错误！

处理这个问题的正确方法是什么，这肯定是别人的问题

【问题讨论】：

你想写snapshot tests吗？请注意，它们不是高质量的测试，它们只是检测实现更改并且很少告诉您有关行为的信息。对于这个特定问题，[Function onClick] 是作为 prop 值传递的函数的表示，而不是您可以比较的实际值 - onClick="{[Function onClick]}" 作为比较的 prop 没有任何意义。

标签： reactjs

【解决方案1】：

Jest 只是一个测试运行器和模拟工具。它无法访问您的反应组件。

你可以试试 Enzyme 用于 React 的 lib。

你可以这样做：

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

describe('<MyComponent />', () => {
  const someClickFunc = Jest.fn();
  it('renders xxx components', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find(xxx)).to.have.lengthOf(x);
  });

  it('simulates click', () => {
    const wrapper = shallow(<MyComponent onClick={someClicFunc} />);
    wrapper.find(MyComponent).simulate('click');
    expect(someClicFunc).toBeCalled();
    // or find the target dom and compare the value
    // expect(wrapper.find('input').value).toEqaul('somevalue u expected')
  });

【讨论】：

这是否是验证该组件的整个 HTMl（由 JSX 生成）的正确方法。即我能否针对该组件的最终整个输出 expect。
这里也可以选择jsdom吗？
可能在这里stackoverflow.com/questions/40970780/…@MichaelDurrant

【解决方案2】：

测试失败，因为{[Function onClick]} 是onClick 方法的字符串representation，但它实际上并不是被渲染的字符串。您需要在测试期间将onClick 与实际函数进行比较。

虽然您可以创建 onClick 的模拟并在断言中使用它，但这不是必需的。如果您不需要（或不想）模拟onClick 功能：使用expect.any(Function)。这将向jest 发出信号，表明正在传递一个函数，但不需要对其进行模拟。

例如，这个测试将渲染你的组件（我称之为<PreviousButton>），并获得渲染的 JSX/TSX。然后它断言呈现的按钮具有正确的className 和type，同时允许将任何函数作为onClick 方法传递。

import ShallowRenderer from 'react-test-renderer/shallow';

describe('Previous Button', () => {
  test('renders clickable button', () => {
    const wrapper = ShallowRenderer.createRenderer();
    wrapper.render(<PreviousButton />);

    const result = wrapper.getRenderOutput();
    expect(result).toEqual([
      <button className="btn btn-prev" onClick={expect.any(Function)} type="button">Prev</button>
    ]);
  });
});

我使用了来自 React 测试库 (17.0.2+) 的 Shallow Renderer，因为它现在推荐用于更高版本的 React 而不是 Enzyme。 react-test-renderer使用前需要通过npm/yarn安装。

【讨论】：