title: How to test class components in react
body: <p>I am trying some unit testing, I created a sandbox with a fake example <a href="https://codesandbox.io/s/wizardly-hooks-32w6l" rel="noreferrer">https://codesandbox.io/s/wizardly-hooks-32w6l</a> (in reality I have a form)</p>
  
  <pre><code>class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = { number: 0 };    
    }
  
    handleSubmit = (number1, number2) =&gt; {
      this.setState({ number: this.handleMultiply(number1, number2) })
    }
  
    handleMultiply = (number1, number2) =&gt; {
      return number1 * number2
    }
  
    render() {
      const { number } = this.state;
  
      return (
        &lt;div className="App"&gt;
          &lt;form onSubmit={e =&gt; this.handleSubmit(3, 7)}&gt;       
            &lt;input type="submit" name="Submit" value="Multiply" /&gt;
          &lt;/form&gt;
          &lt;Table number={number} /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>So my initial idea was to try to test the multiply function. And did this, which obviously doesn't work</p>
  
  <pre><code>import App from "../src/App";
  
  test("Multiply", function() {
    const expected = 21;
    const result = App.handleMultiply(3, 7);
    expect(result).toBe(expected);
  });
  </code></pre>
  
  <p>I get</p>
  
  <blockquote>
    <p>_App.default.handleMultiply is not a function</p>
  </blockquote>
  
  <p>Is my approach right? If yes then how do I test the functions? Else, should I test from a user point of view instead of for internal functions (this is what I read)? Should I test for the output on the screen (I don't think this is reasonable)?</p>