时间戳

首页 > 解决方案 > 酶反应打字稿测试不模拟点击

reactjs - 酶反应打字稿测试不模拟点击

问题描述

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

按钮.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;

按钮.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>
`;

标签： reactjsjestjsenzyme

解决方案

原因是这部分：

onClick={() => myMock}

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

反而。React 会打电话给myMock你.simulate('click')

推荐阅读