Question

我正在尝试模拟按钮的单击，但是测试始终失败，我也不知道为什么。似乎酶无法选择DOM元素来触发对其的点击，因为调用始终为0。我使用的是酶3.7.0和开玩笑的23.6.0

Button.tsx

import * as React from 'react';
import './button.scss';

export interface IButton {
  value: string;
  onClick: () => void;
}

class Button extends React.Component<IButton, {}> {
  render() {
    return (
      <div className="Button">
        <button id="btn" onClick={this.props.onClick} className="Button__btn" type="button">
          {this.props.value}
        </button>
      </div>
    );
  }
}

export default Button;

Button.test.tsx

import * as React from 'react';
import { shallow } from 'enzyme';
import Button  from './Button';

test.only('Button test', () => {
  const myMock = jest.fn();

  const mockedButton = shallow(<Button value="testvalue" onClick={() => myMock} />);
  console.log(mockedButton.debug());

  // Interaction demo
  expect(mockedButton.text()).toEqual('testvalue');

  mockedButton.find('button').simulate('click');
  mockedButton.find('.Button__btn').simulate('click');
  mockedButton.find('button.Button__btn').simulate('click');
  expect(myMock.mock.calls.length).toBe(0); // !! Should be 3 ?

  // Snapshot demo
  expect(mockedButton).toMatchSnapshot();
});

但是，生成的快照可以让我选择正确的元素（按钮）

exports[`Button test 1`] = `
<div
  className="Button"
>
  <button
    className="Button__btn"
    onClick={[Function]}
  >
    testvalue
  </button>
</div>
`;

Answer 1

原因是这部分：

onClick={() => myMock}

在这里，您将描述单击处理程序，该处理程序返回您的模拟而不是调用它。应该是onClick={() => myMock()}，或者最好是onClick={myMock}

相反。 React会在myMock上呼叫您的.simulate('click')

对酶的反应打字稿测试不能模拟点击

1 个答案: