reactjs - 开玩笑 - 反应 - 如何比较包含“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 处收到解析错误！

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

标签： reactjs

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')
  });