开玩笑 - 反应 - 如何比较包含"Function onClick"的渲染输出

Question

>当我有

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 上收到解析错误！

处理这个问题的正确方法是什么，这对其他人来说一定是一个问题

Answer 1

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

你可以试试用于 React 的 Enzyme 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')
});

Answer 2

测试失败{[Function onClick]}因为它是onClick方法的字符串表示形式，但它实际上不是呈现的字符串。您需要在该测试期间将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进行安装。