반응에서 클래스 구성 요소를 테스트하는 방법

단위 테스트를 시도 중이며 가짜 예제 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