जेस्ट में एक बटन क्लिक करें

Question 1

एक बटन क्लिक को अनुकरण करना बहुत आसान / मानक संचालन जैसा लगता है। फिर भी, मैं 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

Question 2

# 1 जेस्ट का उपयोग करना

इस तरह से मैं जेस्ट मॉक कॉलबैक फ़ंक्शन का उपयोग करके क्लिक इवेंट का परीक्षण कर सकता हूं:

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

मैं एंजाइम नामक एक मॉड्यूल का भी उपयोग कर रहा हूं । एंजाइम एक परीक्षण उपयोगिता है जो आपके रिएक्ट घटकों को मुखर करना और चुनना आसान बनाता है

# 2 सिनॉन का उपयोग करना

इसके अलावा, आप सिनॉन नामक एक अन्य मॉड्यूल का उपयोग कर सकते हैं जो जावास्क्रिप्ट के लिए एक स्टैंडअलोन परीक्षण जासूस, स्टब्स और मोक्स है। यह इस तरह दिखता है:

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

Question 3

स्वीकृत उत्तर में समाधानों को पदावनत किया जा रहा है

# 4 कॉलिंग प्रोप सीधे

एंजाइम अनुकार को संस्करण 4 में हटा दिया जाना चाहिए। मुख्य अनुरक्षक सीधे प्रोप कार्यों को लागू करने का सुझाव दे रहा है, जो आंतरिक रूप से अनुकरण करता है। एक समाधान सीधे परीक्षण के लिए है कि उन सहारा को लागू करना सही काम करता है; या आप उदाहरण विधियों को मॉक कर सकते हैं, परीक्षण कर सकते हैं कि प्रोप फ़ंक्शन उन्हें कॉल करते हैं, और इकाई उदाहरण विधियों का परीक्षण करते हैं।

आप उदाहरण के लिए क्लिक पर कॉल कर सकते हैं:

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

या

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

वेतन वृद्धि के बारे में जानकारी: .simulate () # 2173

Question 4

जेस्ट का उपयोग करके, आप इसे इस तरह से कर सकते हैं:

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

Question 5

क्लिक पर लिखे हैंडलर को कॉल करने के लिए आप कुछ इस तरह का उपयोग कर सकते हैं:

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

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

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

Question 6

सिबलिंग टिप्पणियों में सुझाए गए समाधानों के अतिरिक्त, आप अपने परीक्षण के दृष्टिकोण को थोड़ा बदल सकते हैं और पूरे पृष्ठ को एक बार में (गहरे बच्चों के घटक पेड़ के साथ) परीक्षण नहीं कर सकते हैं , लेकिन एक पृथक घटक परीक्षण करें। यह onClick()और इसी तरह की घटनाओं के परीक्षण को सरल करेगा (नीचे उदाहरण देखें)।

विचार एक समय में केवल एक घटक का परीक्षण करना है और सभी को एक साथ नहीं करना है। इस स्थिति में jest.mock () फ़ंक्शन का उपयोग करके सभी बच्चों के घटकों का मज़ाक उड़ाया जाएगा ।

जेस्ट और रिएक्शन-टेस्ट-रेंडरर का उपयोग करके onClick()एक पृथक 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);
  });
});

Question 7

मुझे अपने आप को एक बटन घटक का थोड़ा सा परीक्षण करने की आवश्यकता थी। ये परीक्षण मेरे लिए काम करते हैं ;-)

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