Error in Jest “TestingLibraryElementError: Unable to find an element by: [data-testid="sample-data-test-id"]”

Question

Expected Behavior

For Jest to render and find the element I’m testing so my spec could pass

Current Behavior

The spec I’m trying to write I suppose should be straightforward. I have a component (we’ll call it ‘ProfileDialog’ for the sake of this thread) and I’m simply trying to do an assertion to make sure the “data-testid” I’ve assigned in the Autocomplete component (Mui) is in the document.

Dialog, DialogTitle, DialogContent, MaterialFormGridControl & Autocomplete are all from Material Ui (Mui). I mimic exactly the props that the ProfileDialog is expecting in the Jest file I have. I confirmed this via looking at the React Dev Tools. Based on the threads I read “isOpen” / “open” is a common prop that devs tend to miss whenever doing an assertion with Mui’s Dialog component. I passed a “true” value which also came from props.

For some reason, jest doesn’t seem to have any problem with asserting the “data-testid” for the Dialog component, but it can’t find the “data-testid” I’ve assigned for the Autocomplete component (please refer to the hierarchy visualization I created above). Additionally, when I look at the HTML code via the inspect tab in my Firefox and do a search of the “data-testid” value both “profile-dialog” and “current-address” seems to be there but only “profile-dialog” appears on React Dev Tools, the only way “current-address” appears in React Dev Tools is if I click on the actual component. Please note also that there’s no whatsoever event that’s needed for the Autocomplete component to render. Passing true to Dialog “isOpen” / “open” prop does the trick. (Renders Dialog/DialogContent etc basically everything in my ProfileDialog component)

Additional Information

I’ll indicate here my environment setup in case they’ll help.

• Package manager: Yarn v.1.22.19
• React v16.12.0
• "@testing-library/jest-dom": "^5.11.4"
• "@testing-library/react": "^11.0.4"
• "babel-jest": "25.1.0"
• "jest": "^25.1.0",
• MacOs v13.1

I’ve already tried this & some other SO threads which had the same exact error as me but no luck.

Below is my Jest file

import React from 'react';
import { render, screen, cleanup } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import ProfileDialog from './profileDialog';
import { ToastProvider } from '~/_base/context/toastContext';

const toast = require('../../context/toastContext');
jest.spyOn(toast, 'useToast').mockResolvedValue({
  type: 'SET_NOTIFICATION',
  message: 'message',
  variant: 'success',
});

const props = {
  departmentOptions: [],
  jobTitleOptions: [{ label: 'Job Title 1' }, { label: 'Job Title 2' }],
  id: undefined,
  type: 'operator',
  onClose: jest.fn(),
  onSave: jest.fn(),
  open: true,
};

const component = props => {
  return render(
    <ToastProvider>
      <ProfileDialog {...props} />
    </ToastProvider>
  );
};

describe('ProfileDialog', () => {
  beforeEach(() => {
    component(props);
  });
  afterEach(cleanup);

  it('Renders the Dialog component', () => {
    const currentAddress = screen.getByTestId('current-address');
    expect(currentAddress).toBeInTheDocument();
  });
});