प्रतिक्रिया में वर्ग घटकों का परीक्षण कैसे करें

Question

मैं कुछ यूनिट परीक्षण की कोशिश कर रहा हूं, मैंने एक नकली उदाहरण के साथ सैंडबॉक्स बनाया https://codesandbox.io/s/wizardly-hooks-32w6l (वास्तव में मेरे पास एक फॉर्म है)

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { number: 0 };    
  }

  handleSubmit = (number1, number2) => {
    this.setState({ number: this.handleMultiply(number1, number2) })
  }

  handleMultiply = (number1, number2) => {
    return number1 * number2
  }

  render() {
    const { number } = this.state;

    return (
      <div className="App">
        <form onSubmit={e => this.handleSubmit(3, 7)}>       
          <input type="submit" name="Submit" value="Multiply" />
        </form>
        <Table number={number} />
      </div>
    );
  }
}

export default App;

इसलिए मेरा प्रारंभिक विचार यह था कि हम बहुगुणित क्रियाओं को परखें। और यह किया, जो स्पष्ट रूप से काम नहीं करता है

import App from "../src/App";

test("Multiply", function() {
  const expected = 21;
  const result = App.handleMultiply(3, 7);
  expect(result).toBe(expected);
});

मुझे मिला

_App.default.handleMultiply एक फ़ंक्शन नहीं है

क्या मेरा दृष्टिकोण सही है? यदि हाँ, तो मैं कार्यों का परीक्षण कैसे करूँ? और, क्या मुझे आंतरिक कार्यों के बजाय उपयोगकर्ता के दृष्टिकोण से परीक्षण करना चाहिए (यह वही है जो मैंने पढ़ा है)? क्या मुझे स्क्रीन पर आउटपुट के लिए परीक्षण करना चाहिए (मुझे नहीं लगता कि यह उचित है)?

Comments

आप इसे गलत मानसिकता के साथ देख रहे हैं। इसके बजाय फॉर्म सबमिट को ट्रिगर करें फिर यह सुनिश्चित करने के लिए जांचें कि राज्य को बहुगुणा तर्क सहित उचित रूप से अपडेट किया गया है।

— अलेक्जेंडर स्ट्रासलेसकी

@AlexanderStaroselsky ठीक है, धन्यवाद, मैं कोशिश करूँगा, और अधिक विशिष्ट प्रश्न करूँगा अगर मैं फंस गया

— user3808307

@AlexanderStaroselsky क्या होगा अगर एक बच्चे के घटक में फार्म और माता-पिता में सबमिट हैंडलर? क्या मुझे वहां एकीकरण परीक्षण करने की आवश्यकता है?

— user3808307

यह राय का विषय हो सकता है लेकिन मैं निश्चित रूप से इनका अलग से परीक्षण करूंगा। बच्चे के लिए परीक्षण यह होगा कि यह प्रस्तुत करने के बाद माता-पिता से पारित समारोह को ट्रिगर करता है और फिर यह भी परीक्षण करता है कि राज्य आपकी अपेक्षा के अनुरूप है। माता-पिता के लिए, मैं इस घटना को ट्रिगर करूँगा और सुनिश्चित करूँगा कि राज्य को सही ढंग से अपडेट किया गया है।

— अलेक्जेंडर स्ट्रासॉल्स्की

@AlexanderStaroselsky

— साभार

Answer 1

प्रतिक्रिया घटक का उदाहरण प्राप्त करने के लिए आप उदाहरण () विधि का उपयोग कर सकते हैं enzyme। फिर, handleMultiplyसीधे कॉल विधि और इसके लिए जोर बनाओ। इसके अलावा, अगर handleMultiplyविधि का साइड-इफेक्ट या बहुत जटिल गणना है, तो आपको इसके लिए एक सरल नकली रिटर्न मूल्य बनाने की आवश्यकता है। यह handleSubmitविधि के लिए एक अलग परीक्षण वातावरण बना देगा । इसका मतलब यह है कि handleSubmitविधि विधि के वास्तविक कार्यान्वयन के रिटर्न मूल्य पर निर्भर नहीं करेगी handleMultiply।

उदाहरण के लिए

app.jsx:

import React from 'react';
import { Table } from './table';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { number: 0 };
  }

  handleSubmit = (number1, number2) => {
    this.setState({ number: this.handleMultiply(number1, number2) });
  };

  handleMultiply = (number1, number2) => {
    return number1 * number2;
  };

  render() {
    const { number } = this.state;

    return (
      <div className="App">
        <form onSubmit={(e) => this.handleSubmit(3, 7)}>
          <input type="submit" name="Submit" value="Multiply" />
        </form>
        <Table number={number} />
      </div>
    );
  }
}

export default App;

table.jsx:

import React from 'react';

export const Table = ({ number: num }) => {
  return <div>table: {num}</div>;
};

app.test.jsx:

import App from './app';
import { shallow } from 'enzyme';

describe('59796928', () => {
  let wrapper;
  beforeEach(() => {
    wrapper = shallow(<App></App>);
  });
  describe('#handleSubmit', () => {
    it('should pass', () => {
      expect(wrapper.exists()).toBeTruthy();
      wrapper.find('form').simulate('submit');
      expect(wrapper.state()).toEqual({ number: 21 });
    });
  });
  describe('#handleMultiply', () => {
    it('should pass', () => {
      const comp = wrapper.instance();
      const actual = comp.handleMultiply(2, 10);
      expect(actual).toBe(20);
    });
  });
});

कवरेज रिपोर्ट के साथ इकाई परीक्षण के परिणाम:

 PASS  src/stackoverflow/59796928/app.test.jsx (11.688s)
  59796928
    #handleSubmit
      ✓ should pass (16ms)
    #handleMultiply
      ✓ should pass (9ms)

-----------|----------|----------|----------|----------|-------------------|
File       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files  |    90.48 |      100 |    85.71 |    94.44 |                   |
 app.jsx   |      100 |      100 |      100 |      100 |                   |
 table.jsx |       50 |      100 |        0 |    66.67 |                 4 |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        13.936s

स्रोत कोड: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/59796928

Comments

क्या होगा अगर फॉर्म एक बाल घटक में था? मैं परीक्षण में हैंडसबमिट को कैसे ट्रिगर करूंगा, अन्य जो फॉर्म सबमिट के साथ है? धन्यवाद

— user3808307