模拟Jest中的按钮单击


83

模拟按钮单击似乎是非常简单/标准的操作。但是,我无法在Jest.js测试中使用它。

这是我尝试过的(也使用jQuery完成),但似乎没有触发任何操作:

import { mount } from 'enzyme';

page = <MyCoolPage />;
pageMounted = mount(page);

const button = pageMounted.find('#some_button');
expect(button.length).toBe(1); // It finds it alright
button.simulate('click'); // Nothing happens

您怎么知道它什么都没做?您接下来要检查什么,看看是否发生了按钮单击?
Toby

好问题。我希望出现错误字段:const field = pageMounted.find('#notification'); Expect(field.length).toBe(1);
foob​​ar

嗯 您是否已将a添加console.warn到运行onClick的函数中以查看其是否在Jest控制台中触发?
Toby

您能否为该MyCoolPage 组件添加代码,否则很难弄清楚实际问题是什么。
AndreasKöberle'5

1
谢谢你们的提示。由于您的问题,我找到了我的问题。我基本上用一个简单的按钮做了一个小测试,它起作用了:MyCoolPage =(<button type =“ submit” id =“ cool_button” onClick = {()=> {console.warn('我被点击');}>酷按钮</ button>));然后,我意识到我的按钮属于redux表单,因此它没有onClick,而是onSubmit,因此添加了button.simulate('submit'); 解决了这个问题。再次感谢你的反馈!
foob​​ar'5

Answers:


134

#1使用笑话

这就是我使用Jest模拟回调函数来测试click事件的方式:

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

describe('Test Button component', () => {
  it('Test click event', () => {
    const mockCallBack = jest.fn();

    const button = shallow((<Button onClick={mockCallBack}>Ok!</Button>));
    button.find('button').simulate('click');
    expect(mockCallBack.mock.calls.length).toEqual(1);
  });
});

我还使用了称为的模块。酶是一种测试实用程序,可以使声明和选择React组件更容易

#2使用Sinon

另外,您可以使用另一个名为Sinon的模块,它是JavaScript的独立测试间谍,存根和模拟。它是这样的:

import React from 'react';
import { shallow } from 'enzyme';
import sinon from 'sinon';

import Button from './Button';

describe('Test Button component', () => {
  it('simulates click events', () => {
    const mockCallBack = sinon.spy();
    const button = shallow((<Button onClick={mockCallBack}>Ok!</Button>));

    button.find('button').simulate('click');
    expect(mockCallBack).toHaveProperty('callCount', 1);
  });
});

#3使用自己的间谍

最后,您可以使自己的天真间谍(除非您有充分的理由,否则我不建议您使用这种方法)。

function MySpy() {
  this.calls = 0;
}

MySpy.prototype.fn = function () {
  return () => this.calls++;
}

it('Test Button component', () => {
  const mySpy = new MySpy();
  const mockCallBack = mySpy.fn();

  const button = shallow((<Button onClick={mockCallBack}>Ok!</Button>));

  button.find('button').simulate('click');
  expect(mySpy.calls).toEqual(1);
});

1
谢谢萨满的详细回答!当您可以将onClick方法直接传递到要测试的组件中时,这非常有用,并且我将使用您的代码作为该参考:)。我认为在我的示例中,虽然我无法真正通过onClick,但我不得不依靠其他线索来知道该按钮已被单击。
foob​​ar

在第一个示例的背面,您可以举例说明如何为与输入元素的属性匹配的onChange函数编写测试吗?谢谢!valuevalue
blankface '18

7
但是,这实际上测试了什么?
Omortis

1
我有一个按钮,handleClick当单击该按钮时会调用我的方法。我如何测试handleClick单击按钮时实际调用的内容?
杰里米·莫里茨

尽管它确实回答了React的问题,但大多数答案与模拟有关,而不是与模拟按钮单击有关。
Brady Dowling

19

已弃用答案中的解决方案

#4直接致电道具

应该在版本4中删除酶模拟程序。主要维护者建议直接调用prop函数,这是模拟程序内部执行的操作。一种解决方案是直接测试调用这些道具是否正确。也可以模拟出实例方法,测试prop函数调用它们,然后对实例方法进行单元测试。

您可以调用click,例如:

wrapper.find('Button').prop('onClick')() 

要么

wrapper.find('Button').props().onClick() 

有关弃用的信息: .simulate()的弃用#2173


先前的哪个答案?还是不止一个(哪个?)?
Peter Mortensen

@PeterMortensen我已经弄清楚了答案。可接受的答案是使用酶模拟,它将不推荐使用。
黑色

您可能需要wrapper.update()在其中一种之后致电,因为酶可能无法注意到发生了变化。
辛里奇

12

使用Jest,您可以这样做:

test('it calls start logout on button click', () => {
    const mockLogout = jest.fn();
    const wrapper = shallow(<Component startLogout={mockLogout}/>);
    wrapper.find('button').at(0).simulate('click');
    expect(mockLogout).toHaveBeenCalled();
});

7
单击并在测试中单击模拟的回调然后在测试中创建一个完整的按钮,然后在测试中单击该按钮有什么价值?就像我看到的大多数测试示例一样,执行此操作时甚至没有测试一行实际代码。
杰里米·莫里茨

1
@JeremyMoritz这就是为什么我不理解单元测试的重点或逻辑的原因。
user3808307

0

您可以使用类似这样的方法来调用单击时编写的处理程序:

import { shallow } from 'enzyme'; // Mount is not required

page = <MyCoolPage />;
pageMounted = shallow(page);

// The below line will execute your click function
pageMounted.instance().yourOnClickFunction();

0

除了在同级注释中建议的解决方案之外,您还可以稍微更改测试方法,而不是一次测试整个页面(使用较深的子级组件树),但是要进行隔离的组件测试。这将简化对onClick()事件和类似事件的测试(请参见下面的示例)。

这个想法是一次只测试一个组件,而不是全部一起测试。在这种情况下,将使用jest.mock()函数模拟所有子组件。

这是一个如何使用Jestreact-test-rendereronClick()在隔离的SearchForm组件中测试事件的示例。

import React from 'react';
import renderer from 'react-test-renderer';
import { SearchForm } from '../SearchForm';

describe('SearchForm', () => {
  it('should fire onSubmit form callback', () => {
    // Mock search form parameters.
    const searchQuery = 'kittens';
    const onSubmit = jest.fn();

    // Create test component instance.
    const testComponentInstance = renderer.create((
      <SearchForm query={searchQuery} onSearchSubmit={onSubmit} />
    )).root;

    // Try to find submit button inside the form.
    const submitButtonInstance = testComponentInstance.findByProps({
      type: 'submit',
    });
    expect(submitButtonInstance).toBeDefined();

    // Since we're not going to test the button component itself
    // we may just simulate its onClick event manually.
    const eventMock = { preventDefault: jest.fn() };
    submitButtonInstance.props.onClick(eventMock);

    expect(onSubmit).toHaveBeenCalledTimes(1);
    expect(onSubmit).toHaveBeenCalledWith(searchQuery);
  });
});

0

我需要对按钮组件进行一些自我测试。这些测试对我有用;-)

import { shallow } from "enzyme";
import * as React from "react";
import Button from "../button.component";

describe("Button Component Tests", () => {
    it("Renders correctly in DOM", () => {
        shallow(
            <Button text="Test" />
        );
    });
    it("Expects to find button HTML element in the DOM", () => {
        const wrapper = shallow(<Button text="test"/>)
        expect(wrapper.find('button')).toHaveLength(1);
    });

    it("Expects to find button HTML element with className test in the DOM", () => {
        const wrapper = shallow(<Button className="test" text="test"/>)
        expect(wrapper.find('button.test')).toHaveLength(1);
    });

    it("Expects to run onClick function when button is pressed in the DOM", () => {
        const mockCallBackClick = jest.fn();
        const wrapper = shallow(<Button onClick={mockCallBackClick} className="test" text="test"/>);
        wrapper.find('button').simulate('click');
        expect(mockCallBackClick.mock.calls.length).toEqual(1);
    });
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.