วิธีการทดสอบองค์ประกอบของชั้นเรียนในการตอบสนอง

ฉันลองทดสอบหน่วยฉันสร้าง sandbox พร้อมตัวอย่างปลอม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 ไม่ใช่ฟังก์ชัน

แนวทางของฉันถูกไหม? ถ้าใช่แล้วฉันจะทดสอบฟังก์ชั่นได้อย่างไร? มิฉะนั้นฉันควรทดสอบจากมุมมองของผู้ใช้แทนฟังก์ชั่นภายใน (นี่คือสิ่งที่ฉันอ่าน)? ฉันควรทดสอบผลลัพธ์บนหน้าจอ (ฉันไม่คิดว่ามันสมเหตุสมผลหรือไม่)

คุณสามารถใช้instance ()วิธีenzymeการรับอินสแตนซ์ของ React Component จากนั้นเรียก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