প্রতিক্রিয়াতে শ্রেণীর উপাদানগুলি কীভাবে পরীক্ষা করবেন

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.handle মাল্টিপ্লাই কোনও ফাংশন নয়

আমার পদ্ধতির সঠিক? যদি হ্যাঁ হয় তবে আমি ফাংশনগুলি কীভাবে পরীক্ষা করব? অন্যথায়, আমি কি অভ্যন্তরীণ ফাংশনগুলির পরিবর্তে ব্যবহারকারীর দৃষ্টিকোণ থেকে পরীক্ষা করা উচিত (এটি আমি যা পড়ি)? আমার কী স্ক্রিনের আউটপুট পরীক্ষা করা উচিত (আমি মনে করি এটি যুক্তিসঙ্গত নয়)?

Comments

আপনি ভুল মানসিকতা নিয়ে এটি পৌঁছেছেন। পরিবর্তে ফর্মটি জমা দিন এবং তারপরে নিশ্চিত করুন যে গুণটি যুক্তি সহ যথাযথভাবে আপডেট হয়েছে।

— আলেকজান্ডার স্টারসেলস্কি

@ আলেকজান্ডার স্টারোসেলসস্কি ঠিক আছে, আপনাকে ধন্যবাদ, আমি চেষ্টা করব এবং আমি আটকা পড়লে আরও একটি নির্দিষ্ট প্রশ্ন করব

— user3808307

@ আলেকজান্ডার স্টারোসেলস্কি যদি কোনও সন্তানের উপাদানগুলিতে ফর্ম এবং পিতামাতায় হ্যান্ডলারের জমা দেয় তবে কী হবে? আমার সেখানে কি ইন্টিগ্রেশন টেস্ট করা দরকার?

— ব্যবহারকারী3808307

এটি মতামতের বিষয় হতে পারে তবে আমি অবশ্যই এগুলি আলাদাভাবে পরীক্ষা করব। সন্তানের জন্য পরীক্ষাগুলি হ'ল এটি জমা দেওয়ার পরে পিতা বা মাতার কাছ থেকে প্রপসের মাধ্যমে পাস করা ক্রিয়াকলাপকে ট্রিগার করে তারপরেও রাষ্ট্রটি আপনার প্রত্যাশা অনুযায়ী যেভাবে রেন্ডার করে তা পরীক্ষা করে। পিতামাতার জন্য, আমি ইভেন্টটি ট্রিগার করব এবং নিশ্চিত করব যে রাষ্ট্রটি সঠিকভাবে আপডেট হয়েছে।

— আলেকজান্ডার স্টারোসেলস্কি

@ আলেকজান্ডার স্টারোসেলস্কি আপনাকে ধন্যবাদ

— ব্যবহারকারী 3808307

Answer 1

প্রতিক্রিয়া উপাদানটির উদাহরণ পেতে আপনি উদাহরণ () পদ্ধতিটি ব্যবহার করতে পারেন enzyme। তারপরে, handleMultiplyসরাসরি পদ্ধতিতে কল করুন এবং এটির জন্য দৃ make়তা তৈরি করুন। তদ্ব্যতীত, যদি 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

ফর্মটি যদি কোনও সন্তানের অংশে থাকে তবে কী হবে? আমি কীভাবে পরীক্ষায় হ্যান্ডেল সাবমিটকে ট্রিগার করব, অন্যটি যে কোনও ফর্ম জমা দিয়ে? আপনাকে ধন্যবাদ

— ব্যবহারকারী 3808307