Làm thế nào để kiểm tra các thành phần lớp trong phản ứng

Tôi đang thử một số thử nghiệm đơn vị, tôi đã tạo một hộp cát với ví dụ giả mạo https://codesandbox.io/s/wizardly-hooks-32w6l (trong thực tế tôi có một mẫu)

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;

Vì vậy, ý tưởng ban đầu của tôi là thử kiểm tra hàm nhân. Và đã làm điều này, rõ ràng là không hoạt động

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

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

tôi có

_App.default.handleMultiply không phải là một chức năng

Là cách tiếp cận của tôi phải không? Nếu có thì làm thế nào để tôi kiểm tra các chức năng? Khác, tôi có nên kiểm tra từ quan điểm người dùng thay vì cho các chức năng nội bộ (đây là những gì tôi đọc)? Tôi có nên kiểm tra đầu ra trên màn hình không (tôi không nghĩ điều này hợp lý)?

Bạn có thể sử dụng phương thức instance ()enzyme để lấy thể hiện của Thành phần React. Sau đó, gọi handleMultiplyphương thức trực tiếp và thực hiện xác nhận cho nó. Hơn nữa, nếu handleMultiplyphương thức có tác dụng phụ hoặc tính toán rất phức tạp, bạn cần tạo một giá trị trả về giả đơn giản cho nó. Nó sẽ làm cho một môi trường thử nghiệm bị cô lập cho handleSubmitphương pháp. Điều này có nghĩa là handleSubmitphương thức sẽ không phụ thuộc vào giá trị trả về của việc thực hiện handleMultiplyphương thức.

Ví dụ

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

Kết quả kiểm tra đơn vị với báo cáo bảo hiểm:

 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

Mã nguồn: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/59796928