如何检查onclick函数是否被触发?

时间:2018-04-13 10:39:02

标签: javascript reactjs unit-testing react-redux enzyme

你能否告诉我如何检查onclick功能是否被激活? 我的演示中有一个按钮onClickHandler点击按钮我要查看是否调用it("check counter increment function is callled", () => { const wrapper = shallow(<Counter />); wrapper.find("button").simulate("click"); }); 函数

这是我的代码 https://codesandbox.io/s/oq7kwzrnj5

public class InternetChecker  {


public void checkNet(){

        if(connected()){
            Snackbar.make(findViewById(R.id.activity_login), "Your Internet Connection is Great",
                    Snackbar.LENGTH_LONG)
                    .setAction("Action", null).setActionTextColor(Color.RED).show();
            Log.i("TRUE","User is connected");

        }else{
            Snackbar.make(findViewById(R.id.activity_login), "Your You are not Connected to the internet",
                    Snackbar.LENGTH_LONG)
                    .setAction("Action", null).setActionTextColor(Color.RED).show();
            Log.i("TRUE","User is not connected");
        }

    }

    private boolean connected(){
        ConnectivityManager connectivityManager=(ConnectivityManager) getSystemService(Context.CONNECTIVITY_SERVICE);
        NetworkInfo activeNetworkInfo = connectivityManager.getActiveNetworkInfo();
        return activeNetworkInfo !=null && activeNetworkInfo.isConnected();
    }
}

3 个答案:

答案 0 :(得分:1)

您可以使用像sinon这样的库来监视您的类函数:

import sinon from 'sinon';
const sandbox = sinon.createSandbox();

然后,当您设置测试时,在浅显示组件之前:

it("check counter increment function is callled", () => {
  const spy = sandbox.spy(Counter.prototype, 'onClickHandler');
  const wrapper = shallow(<Counter />);
  wrapper.find("button").simulate("click");
  expect(spy.called).toBe(true);
});

<强>更新

不应将onClickHandler定义为匿名函数,而应使用:

onClickHandler() {
  const increamentCounter = this.state.counter + 1;
  this.setState({
    counter: increamentCounter
  });
}

在你的渲染函数中,绑定它:

render() {
  return (
    <div>
      <p>{this.state.counter}</p>
      <button onClick{this.onClickHandler.bind(this)}>INCREMENT</button>
    </div>
  );
}

使用Jest进行更新

实际上,你甚至不需要像sinon这样的第三方库。你可以使用Jest实现同样的目的:

it("check counter increment function is callled", () => {
  const spy = jest.spyOn(Counter.prototype, "onClickHandler");
  const wrapper = shallow(<Counter />);
  wrapper.find("button").simulate("click");
  expect(spy).toBeCalled();
});

答案 1 :(得分:0)

在onClick中添加console.log()

it("check counter increment function is callled", () => {
    console.log('Im here')
    const wrapper = shallow(<Counter />);
    wrapper.find("button").simulate("click");
 });

答案 2 :(得分:-1)

我在你的代码中添加了控制台日志,它运行正常。

require(shiny)

shinyUI(fluidPage(
titlePanel("Textmining Tool v0.1"),
sidebarLayout(
sidebarPanel(
  fileInput('file1', 'Choose PDF',
            accept = c(
              'text/pdf',
              '.pdf' )),
  fileInput('file2', 'Choose TXT,CSV',
            accept = c(
              'text/csv',
              'text/comma-separated-values',
              'text/tab-separated-values',
              'text/plain',
              '.csv',
              '.tsv'
            )

)),
mainPanel(
  textOutput("plot")
)   
  )
)
)

所以onClickHandler工作正常。对于失败的测试,我认为link可能会有所帮助