Jest'te bir düğme tıklamasını simüle edin

Bir düğme tıklamasını simüle etmek çok kolay / standart bir işlem gibi görünüyor. Yine de, Jest.js testlerinde çalışmasını sağlayamıyorum.

Bu denediğim şeydi (ve bunu jQuery kullanarak yapıyorum), ancak hiçbir şeyi tetiklemedi

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

# 1 Jest'i Kullanmak

Click olayını test etmek için Jest sahte geri arama işlevini şu şekilde kullanıyorum:

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);
  });
});

Ayrıca enzim adlı bir modül kullanıyorum . Enzyme, React Bileşenlerinizi onaylamayı ve seçmeyi kolaylaştıran bir test aracıdır

# 2 Sinon Kullanımı

Ayrıca, bağımsız bir test casusu olan Sinon adlı başka bir modül , JavaScript için saplamalar ve alaylar kullanabilirsiniz. Şöyle görünüyor:

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 Kendi Casusunuzu Kullanmak

Son olarak, kendi saf casusunuzu yapabilirsiniz (Bunun için geçerli bir nedeniniz yoksa bu yaklaşımı önermiyorum).

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);
});

Kabul edilen yanıttaki çözümler kullanımdan kaldırılıyor

# 4 Doğrudan prop çağırma

Enzim simülasyonunun sürüm 4'te kaldırılması gerekiyordu. Ana sürdürücü, doğrudan prop işlevlerini çağırmayı öneriyor, bu da simülasyonun dahili olarak yaptığı şeydir. Çözümlerden biri, bu sahne donanımlarını çağırmanın doğru şeyi yaptığını doğrudan test etmektir; veya örnek yöntemlerin alayını yapabilir, prop işlevlerinin onları çağırdığını test edebilir ve örnek yöntemlerini birim test edebilirsiniz.

Örneğin, tıklama arayabilirsiniz:

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

Veya

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

Kullanımdan kaldırma hakkında bilgi: .simulate () # 2173'ün kullanımdan kaldırılması

Jest'i kullanarak bunu şu şekilde yapabilirsiniz:

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();
});

Tıklamada yazılan işleyiciyi aramak için buna benzer bir şey kullanabilirsiniz:

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

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

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

Kardeş yorumlarında önerilen çözümlere ek olarak, test yaklaşımınızı biraz değiştirebilir ve tüm sayfayı tek seferde test edemezsiniz (derin bir alt bileşenler ağacı ile), ancak izole bir bileşen testi yapabilirsiniz. Bu onClick()ve benzer olayların test edilmesini basitleştirecektir (aşağıdaki örneğe bakın).

Fikir yalnızca test etmektir biri bir defada ve en bileşeni hepsi bir arada bunların. Bu durumda, tüm alt bileşenler jest.mock () işlevi kullanılarak alay edilecektir .

Jest ve react-test-renderer kullanılarak onClick()izole edilmiş bir SearchFormbileşende olayın nasıl test edilebileceğine dair bir örnek .

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);
  });
});

Bir düğme bileşenini kendim için biraz test etmem gerekiyordu. Bu testler benim için çalışıyor ;-)

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);
    });
});