I am repeatedly running into this warning while testing, and there are extremely few search results for “onClonse”.

My stack is:

React + Vite
Vitest + React Testing Library
MSWv2
Material UI

I am getting the following warning:

 RERUN  src/auth/auth.test.jsx x10

stderr | src/auth/auth.test.jsx > auth module tests > login > with invalid credentials, user gets credentials error
Warning: Unknown event handler property `onClonse`. It will be ignored.
    at div
    at /home/nick/code/Full-Stack-Quarkus-and-React/active-project/src/main/frontend/node_modules/@emotion/react/dist/emotion-element-ae8cc4ba.cjs.dev.js:63:23
    at ClickAwayListener (/home/nick/code/Full-Stack-Quarkus-and-React/active-project/src/main/frontend/node_modules/@mui/base/node/ClickAwayListener/ClickAwayListener.js:45:5)
    at Snackbar (/home/nick/code/Full-Stack-Quarkus-and-React/active-project/src/main/frontend/node_modules/@mui/material/node/Snackbar/Snackbar.js:109:44)
    at div
    at /home/nick/code/Full-Stack-Quarkus-and-React/active-project/src/main/frontend/node_modules/@emotion/react/dist/emotion-element-ae8cc4ba.cjs.dev.js:63:23
    at Container (/home/nick/code/Full-Stack-Quarkus-and-React/active-project/src/main/frontend/node_modules/@mui/system/Container/createContainer.js:110:19)
    at Login (/home/nick/code/Full-Stack-Quarkus-and-React/active-project/src/main/frontend/src/auth/Login.jsx:18:42)
    at Routes (/home/nick/code/Full-Stack-Quarkus-and-React/active-project/src/main/frontend/node_modules/react-router/umd/react-router.development.js:887:7)
    at Router (/home/nick/code/Full-Stack-Quarkus-and-React/active-project/src/main/frontend/node_modules/react-router/umd/react-router.development.js:821:17)
    at BrowserRouter (/home/nick/code/Full-Stack-Quarkus-and-React/active-project/src/main/frontend/node_modules/react-router-dom/umd/react-router-dom.development.js:76:7)
    at App
    at DefaultPropsProvider (/home/nick/code/Full-Stack-Quarkus-and-React/active-project/src/main/frontend/node_modules/@mui/system/DefaultPropsProvider/DefaultPropsProvider.js:18:3)
    at RtlProvider (/home/nick/code/Full-Stack-Quarkus-and-React/active-project/src/main/frontend/node_modules/@mui/system/RtlProvider/index.js:19:7)
    at ThemeProvider (/home/nick/code/Full-Stack-Quarkus-and-React/active-project/src/main/frontend/node_modules/@mui/private-theming/node/ThemeProvider/ThemeProvider.js:39:5)
    at ThemeProvider (/home/nick/code/Full-Stack-Quarkus-and-React/active-project/src/main/frontend/node_modules/@mui/system/ThemeProvider/ThemeProvider.js:52:5)
    at Provider (/home/nick/code/Full-Stack-Quarkus-and-React/active-project/src/main/frontend/node_modules/react-redux/lib/components/Provider.js:19:3)
    at Wrapper (/home/nick/code/Full-Stack-Quarkus-and-React/active-project/src/main/frontend/src/__tests__/react-redux.jsx:16:22)

 ✓ src/auth/auth.test.jsx (2) 688ms
   ✓ auth module tests (2) 688ms
     ✓ login (2) 685ms
       ✓ with valid credentials, user logs in 497ms
       ✓ with invalid credentials, user gets credentials error

 Test Files  1 passed (1)
      Tests  2 passed (2)
   Start at  12:30:52
   Duration  1.45s

Previously, this warning went away when I got a test to pass with the new stack. Now I have a passing test that is still throwing this warning.

Here is the passing test that is triggering the warning. If I uncomment the expect assertion, the warning goes away.

...
test('with invalid credentials, user gets credentials error', async () => {
  render(<App />);
  userEvent.type(screen.getByLabelText(/Username/), 'admin');
  userEvent.type(screen.getByLabelText(/Password/), 'wrong');
  userEvent.click(screen.getByText(/Sign In/));
  expect(within(await screen.findByRole('alert')).getByText(/Invalid credentials/)).toBeInTheDocument();
});

This is my 12 line file src/__tests__/react-redux.jsx Note that the stacktrace has it triggering at line 16:

import React from 'react';
import {render as testRender} from '@testing-library/react';
import { ThemeProvider } from '@mui/material';
import { Provider } from 'react-redux';
import {store} from '../store';
import {theme} from '../styles/theme';

export const render = (ui, options = {}) => {
  const Wrapper = ({children}) =>
    <Provider store={store}><ThemeProvider theme={theme}>{children}</ThemeProvider></Provider>;
  return testRender(ui, {wrapper: Wrapper, ...options});
};

Feel free to suggest anything I should add to this question.