title: React - Where to unit test state change when parent component passes method as prop: parent or child component?
body: <p>I am trying to figure out the best way to unit test the following situation</p>
  <ul>
  <li>Parent class component <code>App</code> holds the state of number of <code>attendees</code> as well a method <code>handleAttendeesChange()</code> to update the state</li>
  <li><code>App</code> renders a child component <code>Attendees</code> and passes it 2 props: <code>currentCount</code> and <code>onValueChange</code></li>
  </ul>
  <p>The question is: do I test that the state is changing properly in <strong>App.tsx</strong> or <strong>Attendees.tsx</strong>?
  I've seen examples where I should test the state change in the parent component but those examples show that the parent component displays the value in the DOM instead of the child.</p>
  <p>Code is below</p>
  <p><strong>App.tsx</strong></p>
  <pre><code>import React, { FC, Component } from 'react';
  import {Attendees} from './Attendees';
  
  
  interface AppState {
    attendees: number
  }
  export default class App extends Component&lt;{}, AppState&gt; {
    constructor(props:any) {
      super(props);
      this.handleAttendeesChange = this.handleAttendeesChange.bind(this);
      this.state = {
        attendees: 0
      };
    }
  
    handleAttendeesChange(value: number) {
      this.setState({ attendees: this.state.attendees + value});
    }
    
    render() {
      return (
        &lt;div&gt;
          &lt;h1&gt;Parent Component&lt;/h1&gt;
          &lt;Attendees currentCount={this.state.attendees} onValueChange={this.handleAttendeesChange} /&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  <p><strong>Attendees.tsx</strong></p>
  <pre><code>import React, { FC } from 'react';
  
  type AttendeesProps = {
    currentCount: number,
    onValueChange: (value: number) =&gt; void
  }
  
  export const Attendees:FC&lt;AttendeesProps&gt; = ({ currentCount, onValueChange }) =&gt; {
    return (
        &lt;div&gt;
          &lt;button data-testid=&quot;countUp&quot; onClick={() =&gt; onValueChange(1)}&gt;
            Up
          &lt;/button &gt;
          &lt;button data-testid=&quot;countDown&quot; onClick={() =&gt; onValueChange(-1)}&gt;
            Down
          &lt;/button &gt;
          &lt;p data-testid=&quot;currentCount&quot;&gt;
            {currentCount}
          &lt;/p&gt;
          
        &lt;/div&gt;
      
    )
  }
  </code></pre>
  <p>Here's what I am currently testing in Attendeees.test.tsx using react-testing-library</p>
  <pre><code>import React from 'react';
  import { render, screen, fireEvent } from '@testing-library/react';
  import { unmountComponentAtNode } from &quot;react-dom&quot;;
  // import { act } from &quot;react-dom/test-utils&quot;;
  import {Attendees} from './Attendees';
  let container: any = null;
  beforeEach(() =&gt; {
    // setup a DOM element as a render target
    container = document.createElement(&quot;Main&quot;);
    document.body.appendChild(container);
  });
  
  afterEach(() =&gt; {
    // cleanup on exiting
    unmountComponentAtNode(container);
    container.remove();
    container = null;
  });
  it(&quot;Attendees should respond to callback props&quot;, () =&gt; {
    const onValueChange = jest.fn();
    const { getByTestId } = render(&lt;Attendees currentCount={0} onValueChange={onValueChange} /&gt;, container)
  
    fireEvent.click(getByTestId('countUp'))
    expect(onValueChange).toBeCalledWith(1);
    expect(onValueChange).toHaveBeenCalledTimes(1);
    expect(getByTestId('currentCount').textContent).toBe('1');
  
  })
  </code></pre>