React Testing | importing userEvent from '@testing-library/user-event' generates error "toBeInTheDocument is not a function"

Question

After importing userEvent from @testing-library/user-event I get an error when using functions from @testing-library/jest-dom.

After reading this question I have made sure to import '@testing-library/jest-dom' into the test file and have the newest stable versions of jest-dom and react testing library installed in my project

My test code:

import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/react';
import React from 'react';
import { RecoilRoot } from 'recoil';
import { MyComponent } from '../MyComponent';
import { data} from './testdata';
import userEvent from '@testing-library/user-event';

test('if pressed "YES", display date fields', () => {

  render(
    <RecoilRoot>
      <MyComponent data={testData} />
    </RecoilRoot>
  )

  userEvent.click(screen.getByTestId('radioBtnTrue'))

  expect(screen.getByTestId('generatedField').toBeInTheDocument())
})

Answer 1

Edit: Error was due to a syntax error:

  expect(screen.getByTestId('generatedField').toBeInTheDocument())

was changed to

  expect(screen.getByTestId('generatedField')).toBeInTheDocument();