Question

我正在为我的第一个React应用进行测试，但是我遇到了两个问题。当我寻找一个模拟按钮的问题时，问题一是我得到ID ='callA'的按钮，而不是获得具有不同ID的按钮。我的第二个问题是我试图使用sinon监视具有id =“ callA”调用的按钮的A（）。

我的应用程式

class ReactPage extends React.Component {
  constructor(props) {
      super(props)
      this.B = this.B.bind(this)
      this.C = this.C.bind(this)
  }

  //other functions

  A = () => {
    //stuff that I don't want to run on button click
  }

  render(){
    return(
      <button id="callA" type="submit" onClick={this.A}>Submit</button>
      <button id="callB" type="submit" onClick={(e) => this.B(e.target.value)} value={7}>Call B</button>
      <button id="callC" type="submit" onClick={(e) => this.C(e.target.value)} value={1}>Call C</button>
      <button id="callD" type="submit" onClick={(e) => this.D(e.target.value)} value={2}>Call D</button>
    );
  }
}

这是我尝试测试调用A（）的按钮

import {shallow, mount, configure} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import sinon from 'sinon';
import ReactPage from './App';

configure({ adapter: new Adapter() });

it('submit button call A()', () => {
  const spy = sinon.spy(ReactPage.prototype, "A");
  const rendered = shallow(<ReactPage />);
  rendered.find("#callA").simulate('click');
  expect(spy.calledOnce).toEqual(true);
});

Answer 1

您可以使用jest来监视ReactPage的实例。

it('submit button call A()', () => {
  const rendered = shallow(<ReactPage />);
  const spyOn = jest.spy(rendered.instance(), "A");
  rendered.find("#callA").simulate('click');
  expect(spyOn).toHaveBeenCalled();
});

如何使用sinon从特定的按钮单击监视功能？

1 个答案: