dimanche 1 novembre 2020

Jest test, named export of redux component makes useEffect trigger 2 times instead of one

I am trying to test component with jest and react-testing-library.

I decided to make named export of the component and separate it from Redux. The problem is that when I use named export first useEffect with the empty array is called twice. That is happening only with jest test and when importing it as named export. It's not happening when importing it as default export or when I run the app on localhost.

First time I get all the props that I passed down with jest test but second time it's called those props disappear and I get props that are passed down to the child component. Why is this happening?

  useEffect(() => {
    console.log('I APEARE ONCE', props)
    setParsedQueryString(queryString.parse(location.search))
  }, [])

  useEffect(() => {
 
    if (parsedQueryString.person_id && parsedQueryString.job_id) {
      console.log('SECOND USE EFFECT', props)
      props
        .getLicenseVerificationDataAction(
          window.activeEnvironment,
          parsedQueryString.person_id,
          parsedQueryString.job_id
        )
        .then((response) => {
            setActiveScreen({
              activeStep: "first",
              verificationStatus: "good",
            })
        })
        .catch((error) => {
           console.log("ERROR")
        })
    }
  }, [parsedQueryString])

...

  return activeScreen.activeStep === "first" ? (
    <div data-testid="verification-flow">
      <VerificationFlow
        verificationType={props.match.params.slug}
        verificationData={parsedQueryString}
        changeActiveStep={handleChangeActiveStep}
        activeStep={activeScreen.activeStep}
        verificationStatus={activeScreen.verificationStatus}
      />
    </div>
  ) : (
    <img
      data-testid="spinner"
      src={spinner}
      width="50"
      style=
    />
  )

JEST

const props = {
  location: {
    search:
      '?person_id=1231232&job_id=444555&state=NY&uploaded_by_recruiter=0&job_name=Nursing%20home%20Facility&company_profile=lindsays-smoothies',
  },
  getLicenseVerificationDataAction: jest.fn(() =>
    Promise.resolve({
      credentials: {
        active: 'NO',
        birth_year: 1990,
        job_type: 'RN',
        last_checked: '2020-10-30T15:25:16.102Z',
        license_status: 'EXPIRED',
        person_id: 1231232,
      },
      developerMessage: null,
    })
  ),
}

test('verification route is rendered', async () => {
  const { debug, getByTestId, queryByTestId, findByTestId } = render(
    <Provider store={store}>
      <Verification {...props} />
    </Provider>
  )
  expect(queryByTestId('spinner')).toBeTruthy()

  await waitForElementToBeRemoved(() => queryByTestId('spinner'))
  expect(queryByTestId('spinner')).toBeFalsy()
  await waitFor(() => expect(queryByTestId('verification-flow')).toBeTruthy())
})

I wanna test if VerificationFlow component has rendered.

So the first time console.log triggers ("I APEARE ONCE") I see props that I passed with jest After that console.log("SECOND USE EFFECT") triggers And then after that first console .log ("I APEARE ONCE") triggers again and props that I see are the props that are passed to VerificationFlow component, not the ones that I passed with Jest.

this triggers error "can not read property search of undefined" because props that I pass from jest are not there anymore.

Why is this triggering twice and where did the props go? This is a top level component and there is no rerendering. When I run application on localhost I don't see that console.log triggers second time. Only durin jest test and named export.

Aucun commentaire:

Enregistrer un commentaire