Jest warning "Function components cannot be given refs." with TypeScript Functional Component Setup

Question

The current setup is React 18 with the current versions of webpack, babel, typescript, jest & using the MaterialUI component library. Running/building the application produces no error & the warning below only occurs during the component Jests test. I can provide the callstack if needed.

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Check the render method of 'ForwardRef(Rating)'.

Menu.tsx Component:

import React from 'react';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';

type MyProps = {
  increment: () => void
  decrement: () => void
  clear: () => void
}

export default function Menu(props: MyProps){
  return(
    <Stack direction="row" spacing={2}>
      <Button className="qa-increment" variant="contained" onClick={props.increment}>Display Additional Provider</Button>
      <Button className="qa-decrement" variant="contained" onClick={props.decrement}>Remove Provider</Button>
      <Button className="qa-clear" variant="contained" onClick={props.clear}>Clear Providers</Button>
    </Stack>
  )
}

Menus Partent Component

....
</Typography>
<Menu
  increment={() => {this.increaseCount()}}
  decrement={() => {this.decreaseCount()}}
  clear={() => {this.clearCount()}}
/>
<Grid container spacing={5}>
....

Jest Component Test:

import React from 'react';
import renderer from 'react-test-renderer';
import Menu from './Menu';

describe('it checks the Card copmonent', ()=> {
  it('Checks against the component snapshot', () => {
    const tree = renderer
      .create(<Menu/>)
      .toJSON();
    expect(tree).toMatchSnapshot();
  });
});

I've been looking through posts related to this issue. Although being new to React/Jest & how TypeScript setup should be implenented with React. I'm unsure is they apply to my setup. I have tried using jest.mock() & wrapping the renderer function in React.forwardRef() without any luck(I was probably doing it wrong). This post seems very close, I just have yet to find a way to figure how this would work in my setup.

Update: In my case, this issue seems related to the MaterialUI components. When removing them and using HTML5 elements, the warning no longer appear. Going further down this rabbit hole.

Answer 1

I had the same warning in tests, and it turned out to be because jest was using the node testEnvironment. When I changed it to jsdom the warning went away. You'll need to add jest-environment-jsdom to your devDependencies. See here for more information on testEnvironment

Otherwise you can get around it using jest.mock

jest.mock("@mui/material/Button", () => ({ children }) => (
  <button>{children}</button>
));
jest.mock("@mui/material/Stack", () => ({ children }) => (
  <div>{children}</div>
));