title: Jest: Mock data is not being received by component
body: <p>I'm writing test for some React code using Jest and I'm facing a problem with mock data not being received by the component I'm trying to test. First of all, this error is being thrown:</p>
  <p><strong>Fields validation function:</strong></p>
  <pre><code>const validateTimesheetEntryFields = (
      fields: TimesheetEntryFields
  ): TimesheetEntry =&gt; {
      const { timesheet, quantity, timeCategory, date, task } = fields
      if (timesheet &amp;&amp; quantity &amp;&amp; date &amp;&amp; timeCategory &amp;&amp; task) {
          return { ...fields, timesheet, quantity, date, timeCategory, task }
      }
      throw Error(&quot;Invalid timesheet entry form: missing required fields&quot;)
  }
  </code></pre>
  <p>I did some debugging and it seems that the problem is with the timeCategory and task (line 5 of the validation function) because if I remove them from the validation function, I don't receive this error in the console:</p>
  <p><strong>Error:</strong></p>
  <pre><code>  ● a timesheet entry with the required fields only can be submitted
  
      Invalid timesheet entry form: missing required fields
  
        50 |         return { ...fields, timesheet, quantity, date, timeCategory, task }
        51 |     }
      &gt; 52 |     throw Error(&quot;Invalid timesheet entry form: missing required fields&quot;)
           |           ^
        53 | }
        54 |
        55 | function TimesheetEntryForm({
  
  </code></pre>
  <p>The test which the concern is about looks like this.</p>
  <p><strong>Test:</strong></p>
  <pre><code>const customerEndpointURL = `${NEXT_PUBLIC_API_URL}/timesheet-entry`
  const bodySpy = sinon.spy((body) =&gt; body)
  const pathSpy = sinon.spy((path) =&gt; path)
  
  jest.mock(&quot;@/lib/utils/fetch&quot;, () =&gt; ({
      // eslint-disable-next-line require-await
      post: async (
          path: string,
          _user: User,
          body: object
      ): Promise&lt;ApiUpdateResponse&lt;TimesheetEntry&gt;&gt; =&gt;
          pathSpy(path) &amp;&amp; bodySpy(body),
  }))
  
  jest.mock(&quot;@/lib/hooks/useList.ts&quot;, () =&gt; ({
      useTasks: () =&gt; ({
          isSuccess: true,
          isLoading: false,
          isError: false,
          data: [testTask],
      }),
  }))
  
  afterEach(() =&gt; {
      bodySpy.resetHistory()
      pathSpy.resetHistory()
  })
  
  const fillAndSubmitForm = async (timesheetEntry: TimesheetEntry) =&gt; {
      const quantityInput = screen.getByTestId(&quot;form-field-quantity&quot;)
      fireEvent.change(quantityInput, {
          target: { value: timesheetEntry.quantity },
      })
  
      const descriptionInput = screen.getByTestId(&quot;form-field-description&quot;)
      fireEvent.change(descriptionInput, {
          target: { value: timesheetEntry.description || &quot;&quot; },
      })
  
      const taskInput = screen.getByTestId(&quot;form-field-task&quot;)
      if (timesheetEntry.task) {
          fireEvent.change(taskInput, {
              target: { value: timesheetEntry.task.id },
          })
      }
  
      const timeCategoryInput = screen.getByTestId(&quot;form-field-time-category&quot;)
      if (timesheetEntry.timeCategory) {
          fireEvent.change(timeCategoryInput, {
              target: { value: timesheetEntry.timeCategory.name },
          })
      }
  
      const submitButton = screen.getByTestId(&quot;form-button-submit&quot;)
      await waitFor(() =&gt; fireEvent.click(submitButton))
  }
  
  test(&quot;a timesheet entry with the required fields only can be submitted&quot;, async () =&gt; {
      render(
          &lt;CreateTimesheetEntryForm
              timesheet={testTimesheetRequiredFields}
              projectId={1}
              date={&quot;2022-01-01&quot;}
              timeCategories={[testTimeCategory]}
          /&gt;
      )
      await fillAndSubmitForm(testTimesheetEntryAllFields)
  
      await waitFor(() =&gt; expect(bodySpy.callCount).toEqual(1))
      expect(pathSpy.getCalls()[0].args[0]).toStrictEqual(customerEndpointURL)
      expect(bodySpy.getCalls()[0].args[0]).toStrictEqual(
          testTimesheetEntryRequiredFields
      )
  })
  </code></pre>
  <p>TimeCategory and Task fields are defined in the timesheetEntryForm component (which the createTimesheetEntryForm component uses) like this:</p>
  <p><strong>TimesheetEntryForm component:</strong></p>
  <pre><code> &lt;FormControl&gt;
                      &lt;Select
                          onChange={handleTaskChange}
                          placeholder=&quot;Select task&quot;
                          marginRight=&quot;0.3rem&quot;
                          value={timesheetEntryFields.task?.id}
                          data-testid={&quot;form-field-task&quot;}
                          key={taskSelectorKey}
                      &gt;
                          {tasks.map((task, idx) =&gt; (
                              &lt;option key={idx} value={task.id}&gt;
                                  {task.name}
                              &lt;/option&gt;
                          ))}
                      &lt;/Select&gt;
                  &lt;/FormControl&gt;
                  &lt;FormControl&gt;
                      &lt;Select
                          onChange={handleTimeCategoryChange}
                          placeholder=&quot;Select time category&quot;
                          marginRight=&quot;0.3rem&quot;
                          value={timesheetEntryFields.timeCategory?.id}
                          data-testid={&quot;form-field-time-category&quot;}
                      &gt;
                          {timeCategories.map((timeCategory, idx) =&gt; (
                              &lt;option key={idx} value={timeCategory.id}&gt;
                                  {timeCategory.name}
                              &lt;/option&gt;
                          ))}
                      &lt;/Select&gt;
                  &lt;/FormControl&gt;
  </code></pre>
  <p>I'd be really grateful if somebody knew the solution to this.</p>
  <p>Thank you in advance!</p>