title: Jest/React-testing-library: .find is not a function in the tested component
body: <p>I have been doing integration tests of my project's front-end pages with jest and react-testing-library, and have come accross an error I don't fully understand.</p>
  <p>The page I am testing renders a formik form that the users inputs data for an commercial institution:</p>
  <pre><code>import React from 'react';
  import {
    FormGroup, Label, Row,
  } from 'reactstrap';
  import {
    Field, getIn, FieldArray, useFormikContext,
  } from 'formik';
  
  import { useRecoilValue } from 'recoil';
  import Select from 'react-select';
  import {
    institutionTypeAtom,
  } from 'recoil/institution';
  import { Colxx } from 'components/common/CustomBootstrap';
  import IntlMessages from 'helpers/IntlMessages';
  
  import { FormikStep } from 'components/Stepper/Step';
  
  const InstitutionStep1 = ({ label, isView, validationSchema }) =&gt; {
    const {
      values, errors, touched, setFieldValue,
    } = useFormikContext();
    const types = useRecoilValue(institutionTypeAtom);
  
    const typeFind = (values) =&gt; {
      types.find((t) =&gt; t.institution_type_id === values.institution_type_id);
      return values.institution_type_id;
    };
  
    return (
      &lt;FormikStep&gt;
          &lt;Colxx xxs=&quot;4&quot;&gt;
            &lt;FormGroup&gt;
              &lt;Label&gt;
                &lt;IntlMessages id=&quot;institution.type&quot; /&gt;
              &lt;/Label&gt;
              &lt;Select
                placeholder=&quot;Selecione o tipo&quot;
                value={types.find((t) =&gt; t.institution_type_id === values.institution_type_id)}
                isDisabled={isView}
                onChange={(selectedType) =&gt; {
                  setFieldValue('institution_type_id', selectedType.institution_type_id);
                }}
                options={types}
                className=&quot;react-select&quot;
                classNamePrefix=&quot;react-select&quot;
                name=&quot;institution_type_id&quot;
                aria-label=&quot;institution_type_id&quot;
                getOptionLabel={(option) =&gt; option.institution_type}
                getOptionValue={(option) =&gt; option.institution_type_id}
              /&gt;
              {getIn(errors, 'institution_type_id') &amp;&amp; getIn(touched, 'institution_type_id') &amp;&amp; (
              &lt;div className=&quot;invalid-feedback d-block&quot;&gt;
                {getIn(errors, 'institution_type_id')}
              &lt;/div&gt;
              )}
            &lt;/FormGroup&gt;
          &lt;/Colxx&gt;
        &lt;/Row&gt;
      &lt;/FormikStep&gt;
    );
  };
  
  export default InstitutionStep1;
  </code></pre>
  <p>and one of the input fields is a select where he can select a type for the institution (private, public, foreign...). I am also using a stepper, and formikStep is the final component from that stepper that receives the initialValues:</p>
  <pre><code>export const institutionInitialValues: InitialValues&lt;BaseInstitutionType&gt; = (institution = {}) =&gt; ({
    institution_type_id: institution.institution_type_id ? institution.institution_type_id : '',
    deleted: !!institution.deleted,
  });
  </code></pre>
  <p>And I have written my test to get the users select from the rendered page, but I am also very new to the testing area so I am referencing other tests that were on this project already:</p>
  <pre><code>import React from 'react';
  import userEvent from '@testing-library/user-event';
  import {
    cleanup, screen, act, render, waitFor, renderWithRecoilSnapshot,
  } from 'testWrapper';
  import * as institution from 'services/adminModules/institution';
  import {
    generateMockInstitution, mockAxiosResponse,
  } from 'helpers/testMocks';
  import { institutionTypeAtom } from 'recoil/institution';
  import InstitutionForm from '../../views/app/admin/InstitutionsPage/InstitutionForm';
  
  let createInstitution: jest.SpyInstance;
  
  const mockInstitution = generateMockInstitution();
  
  const mockSubmit = jest.fn();
  
  const mockClose = jest.fn();
  
  const renderComponent = () =&gt; renderWithRecoilSnapshot(&lt;InstitutionForm
    handleClose={mockClose}
    handleSubmit={mockSubmit}
  /&gt;,
  ({ set }) =&gt; {
    set(institutionTypeAtom, 1);
  });
  
  describe('InstitutionFormPage', () =&gt; {
    afterEach(cleanup);
    beforeEach(() =&gt; {
      createInstitution = jest.spyOn(institution, 'createInstitution').mockImplementation(async () =&gt; mockAxiosResponse());
      jest.spyOn(institution, 'getInstitution').mockImplementation(async () =&gt; mockAxiosResponse());
    });
  
    it('should submit institution data', async () =&gt; {
      renderComponent();
  
      await waitFor(() =&gt; expect(screen.queryByText('loading')).not.toBeInTheDocument());
  
      screen.logTestingPlaygroundURL();
  
     
      const institution_type_id = screen.getByRole('select', { name: 'institution_type_id' });
  
      expect(institution_type_id).toBeInTheDocument();
  
      await act(async () =&gt; {
        await userEvent.selectOptions(institution_type_id, mockInstitution.institution_type_id);
      });
  
      const button = screen.getByRole('button', { name: /salvar/i });
      expect(button).toBeInTheDocument();
  
      await act(async () =&gt; {
        await userEvent.click(button);
      });
  
      await waitFor(() =&gt; expect(mockSubmit).toHaveBeenCalledWith(mockInstitution));
    });
  });
  </code></pre>
  <p>Seemingly, the test is correct, but I am getting an error from when I run it's test that says that a .find I am using, in the component, is not a function.</p>
  <p><a href="https://i.stack.imgur.com/rBd5j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rBd5j.png" alt="enter image description here" /></a></p>
  <p>So my main question would be, does this mean the test is correct and is appropriately catching a code error? Or is it wrong and it's not able to proceed? Also, the code it complains about works fine, and I was taught that an integration test tests api requests, so is there a reason why the test would complain about it, but the code would work fine?</p>