[React@18] Upgrade @testing-library/react (#198918)

This commit is contained in:
Anton Dosov 2024-11-11 09:31:15 +01:00 committed by GitHub
parent 4eda49f0cf
commit c8227a2694
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 128 additions and 58 deletions

View file

@ -1518,9 +1518,9 @@
"@storybook/react": "^6.5.16",
"@storybook/testing-react": "^1.3.0",
"@storybook/theming": "^6.5.16",
"@testing-library/dom": "^8.19.0",
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^6.5.0",
"@testing-library/react": "^12.1.5",
"@testing-library/react": "^16.0.1",
"@testing-library/react-hooks": "^8.0.1",
"@testing-library/user-event": "^14.5.2",
"@types/adm-zip": "^0.5.0",

View file

@ -0,0 +1,10 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the "Elastic License
* 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
* Public License v 1"; you may not use this file except in compliance with, at
* your election, the "Elastic License 2.0", the "GNU Affero General Public
* License v3.0 only", or the "Server Side Public License, v 1".
*/
export {};

View file

@ -58,6 +58,13 @@ module.exports = (request, options) => {
});
}
// This is a workaround to run tests with React 17 and the latest @testing-library/react
// This will be removed once we upgrade to React 18 and start transitioning to the Concurrent Mode
// Tracking issue to clean this up https://github.com/elastic/kibana/issues/199100
if (request === 'react-dom/client') {
return Path.resolve(__dirname, 'mocks/react_dom_client_mock.ts');
}
if (request === `elastic-apm-node`) {
return APM_AGENT_MOCK;
}

View file

@ -19,3 +19,34 @@ import { configure } from '@testing-library/react';
// instead of default 'data-testid', use kibana's 'data-test-subj'
configure({ testIdAttribute: 'data-test-subj', asyncUtilTimeout: 4500 });
/* eslint-env jest */
// This is a workaround to run tests with React 17 and the latest @testing-library/react
// Tracking issue to clean this up https://github.com/elastic/kibana/issues/199100
jest.mock('@testing-library/react', () => {
const actual = jest.requireActual('@testing-library/react');
return {
...actual,
render: (ui, options) => actual.render(ui, { ...options, legacyRoot: true }),
renderHook: (render, options) => actual.renderHook(render, { ...options, legacyRoot: true }),
};
});
// This is a workaround to run tests with React 17 and the latest @testing-library/react
// And prevent the act warnings that were supposed to be muted by @testing-library
// The testing library mutes the act warnings in some cases by setting IS_REACT_ACT_ENVIRONMENT which is React@18 feature https://github.com/testing-library/react-testing-library/pull/1137/
// Using this console override we're muting the act warnings as well
// Tracking issue to clean this up https://github.com/elastic/kibana/issues/199100
// NOTE: we're not muting all the act warnings but only those that testing-library wanted to mute
const originalConsoleError = console.error;
console.error = (...args) => {
if (global.IS_REACT_ACT_ENVIRONMENT === false) {
if (args[0].includes('Warning: An update to %s inside a test was not wrapped in act')) {
return;
}
}
originalConsoleError(...args);
};

View file

@ -18,7 +18,7 @@ const mockChatService = createMockChatService();
let items: ReturnType<typeof getTimelineItemsfromConversation>;
function Providers({ children }: { children: React.ReactElement }) {
function Providers({ children }: { children: React.ReactNode }) {
return (
<IntlProvider locale="en" messages={{}}>
<KibanaContextProvider

View file

@ -403,10 +403,9 @@ describe('CheckAll', () => {
// simulate the wall clock advancing
for (let i = 0; i < totalIndexNames + 1; i++) {
act(() => {
await act(async () => {
jest.advanceTimersByTime(1000 * 10);
});
await waitFor(() => {});
}
});

View file

@ -21,12 +21,13 @@ import { CasesTimelineIntegrationProvider } from '../timeline_context';
import { timelineIntegrationMock } from '../__mock__/timeline';
import type { CaseAttachmentWithoutOwner } from '../../types';
import type { AppMockRenderer } from '../../common/mock';
import { useCreateAttachments } from '../../containers/use_create_attachments';
jest.mock('../../containers/api', () => ({
createAttachments: jest.fn(),
}));
jest.mock('../../containers/use_create_attachments');
const createAttachmentsMock = createAttachments as jest.Mock;
const useCreateAttachmentsMock = useCreateAttachments as jest.Mock;
const createAttachmentsMock = jest.fn().mockImplementation(() => defaultResponse);
const onCommentSaving = jest.fn();
const onCommentPosted = jest.fn();
@ -58,7 +59,10 @@ describe('AddComment ', () => {
beforeEach(() => {
jest.clearAllMocks();
appMockRender = createAppMockRenderer();
createAttachmentsMock.mockImplementation(() => defaultResponse);
useCreateAttachmentsMock.mockReturnValue({
isLoading: false,
mutate: createAttachmentsMock,
});
});
afterEach(() => {
@ -72,6 +76,11 @@ describe('AddComment ', () => {
});
it('should render spinner and disable submit when loading', async () => {
useCreateAttachmentsMock.mockReturnValue({
isLoading: true,
mutateAsync: createAttachmentsMock,
});
appMockRender.render(<AddComment {...{ ...addCommentProps, showLoading: true }} />);
fireEvent.change(screen.getByLabelText('caseComment'), {
@ -109,16 +118,19 @@ describe('AddComment ', () => {
await waitFor(() => expect(onCommentSaving).toBeCalled());
await waitFor(() =>
expect(createAttachmentsMock).toBeCalledWith({
caseId: addCommentProps.caseId,
attachments: [
{
comment: sampleData.comment,
owner: SECURITY_SOLUTION_OWNER,
type: AttachmentType.user,
},
],
})
expect(createAttachmentsMock).toBeCalledWith(
{
caseId: addCommentProps.caseId,
attachments: [
{
comment: sampleData.comment,
type: AttachmentType.user,
},
],
caseOwner: SECURITY_SOLUTION_OWNER,
},
{ onSuccess: expect.any(Function) }
)
);
await waitFor(() => {
expect(screen.getByTestId('euiMarkdownEditorTextArea')).toHaveTextContent('');
@ -258,16 +270,19 @@ describe('draft comment ', () => {
await waitFor(() => {
expect(onCommentSaving).toBeCalled();
expect(createAttachmentsMock).toBeCalledWith({
caseId: addCommentProps.caseId,
attachments: [
{
comment: sampleData.comment,
owner: SECURITY_SOLUTION_OWNER,
type: AttachmentType.user,
},
],
});
expect(createAttachmentsMock).toBeCalledWith(
{
caseId: addCommentProps.caseId,
attachments: [
{
comment: sampleData.comment,
type: AttachmentType.user,
},
],
caseOwner: SECURITY_SOLUTION_OWNER,
},
{ onSuccess: expect.any(Function) }
);
});
await waitFor(() => {

View file

@ -172,6 +172,8 @@ describe('CreateCase case', () => {
await user.click(screen.getByTestId('create-case-submit'));
expect(defaultProps.onSuccess).toHaveBeenCalled();
await waitFor(() => {
expect(defaultProps.onSuccess).toHaveBeenCalled();
});
});
});

View file

@ -17,7 +17,7 @@ import { coreMock } from '@kbn/core/public/mocks';
import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
type UiRender = (ui: React.ReactElement, options?: RenderOptions) => RenderResult;
type UiRender = (ui: React.ReactNode, options?: RenderOptions) => RenderResult;
/**
* Mocked app root context renderer
@ -113,7 +113,7 @@ export const createAppRootMockRenderer = (): AppContextTestRender => {
},
});
const AppWrapper: React.FC<{ children: React.ReactElement }> = ({ children }) => (
const AppWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
<AppRootProvider history={history} coreStart={coreStart}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</AppRootProvider>

View file

@ -3,7 +3,7 @@
exports[`TransactionActionMenu matches the snapshot 1`] = `
<div>
<div
class="euiPopover emotion-euiPopover-inline-block"
class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
id="transactionActionMenu"
>
<button

View file

@ -283,7 +283,7 @@ export const createAppRootMockRenderer = (): AppContextTestRender => {
},
});
const AppWrapper: React.FC<{ children: React.ReactElement }> = ({ children }) => (
const AppWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
<AppRootProvider
store={store}
history={history}

View file

@ -499,6 +499,9 @@ describe('RelatedIntegrations form part', () => {
comboBoxToggleButton: screen.getByTestId(COMBO_BOX_TOGGLE_BUTTON_TEST_ID),
optionIndex: 0,
});
await waitFor(() => {
expect(screen.getByTestId(VERSION_INPUT_TEST_ID)).toHaveValue('^1.2.0');
});
await setVersion({ input: screen.getByTestId(VERSION_INPUT_TEST_ID), value: '1.0.0' });
await submitForm();
await waitFor(() => {
@ -614,6 +617,9 @@ describe('RelatedIntegrations form part', () => {
await selectFirstEuiComboBoxOption({
comboBoxToggleButton: screen.getByTestId(COMBO_BOX_TOGGLE_BUTTON_TEST_ID),
});
await waitFor(() => {
expect(screen.getByTestId(VERSION_INPUT_TEST_ID)).toHaveValue('^1.0.0');
});
await setVersion({ input: screen.getByTestId(VERSION_INPUT_TEST_ID), value: '100' });
expect(screen.getByTestId(RELATED_INTEGRATION_ROW)).toHaveTextContent(

View file

@ -116,7 +116,7 @@ export const createAppRootMockRenderer = (): AppContextTestRender => {
},
});
const AppWrapper: React.FC<{ children: React.ReactElement }> = ({ children }) => (
const AppWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
<AppRootProvider history={history} coreStart={coreStart}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</AppRootProvider>

View file

@ -107,7 +107,7 @@ export interface AppMockRenderer {
export const createAppMockRenderer = (): AppMockRenderer => {
const services = createStartServicesMock();
const AppWrapper: React.FC<{ children: React.ReactElement }> = ({ children }) => (
const AppWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
<I18nProvider>
<KibanaContextProvider services={services}>{children}</KibanaContextProvider>
</I18nProvider>

View file

@ -151,7 +151,7 @@ describe('health check', () => {
// wait for useEffect to run
});
const description = queryByRole(/banner/i);
const description = queryByRole('banner');
expect(description!.textContent).toMatchInlineSnapshot(
`"You must configure an encryption key to use Alerting. Learn more.(external, opens in a new tab or window)"`
);

View file

@ -116,6 +116,8 @@ const waitForModalLoad = async (options?: {
describe('rules_settings_modal', () => {
beforeEach(async () => {
jest.clearAllMocks();
const [
{
application: { capabilities },

View file

@ -9873,18 +9873,18 @@
resolved "https://registry.yarnpkg.com/@testim/chrome-version/-/chrome-version-1.1.4.tgz#86e04e677cd6c05fa230dd15ac223fa72d1d7090"
integrity sha512-kIhULpw9TrGYnHp/8VfdcneIcxKnLixmADtukQRtJUmsVlMg0niMkwV0xZmi8hqa57xqilIHjWFA0GKvEjVU5g==
"@testing-library/dom@^8.0.0", "@testing-library/dom@^8.19.0":
version "8.19.0"
resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.19.0.tgz#bd3f83c217ebac16694329e413d9ad5fdcfd785f"
integrity sha512-6YWYPPpxG3e/xOo6HIWwB/58HukkwIVTOaZ0VwdMVjhRUX/01E4FtQbck9GazOOj7MXHc5RBzMrU86iBJHbI+A==
"@testing-library/dom@^10.4.0":
version "10.4.0"
resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-10.4.0.tgz#82a9d9462f11d240ecadbf406607c6ceeeff43a8"
integrity sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==
dependencies:
"@babel/code-frame" "^7.10.4"
"@babel/runtime" "^7.12.5"
"@types/aria-query" "^4.2.0"
aria-query "^5.0.0"
"@types/aria-query" "^5.0.1"
aria-query "5.3.0"
chalk "^4.1.0"
dom-accessibility-api "^0.5.9"
lz-string "^1.4.4"
lz-string "^1.5.0"
pretty-format "^27.0.2"
"@testing-library/jest-dom@^6.5.0":
@ -9908,14 +9908,12 @@
"@babel/runtime" "^7.12.5"
react-error-boundary "^3.1.0"
"@testing-library/react@^12.1.5":
version "12.1.5"
resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-12.1.5.tgz#bb248f72f02a5ac9d949dea07279095fa577963b"
integrity sha512-OfTXCJUFgjd/digLUuPxa0+/3ZxsQmE7ub9kcbW/wi96Bh3o/p5vrETcBGfP17NWPGqeYYl5LTRpwyGoMC4ysg==
"@testing-library/react@^16.0.1":
version "16.0.1"
resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-16.0.1.tgz#29c0ee878d672703f5e7579f239005e4e0faa875"
integrity sha512-dSmwJVtJXmku+iocRhWOUFbrERC76TX2Mnf0ATODz8brzAZrMBbzLwQixlBSanZxR6LddK3eiwpSFZgDET1URg==
dependencies:
"@babel/runtime" "^7.12.5"
"@testing-library/dom" "^8.0.0"
"@types/react-dom" "<18.0.0"
"@testing-library/user-event@^14.5.2":
version "14.5.2"
@ -10140,10 +10138,10 @@
resolved "https://registry.yarnpkg.com/@types/archy/-/archy-0.0.32.tgz#8b572741dad9172dfbf289397af1bb41296d3e40"
integrity sha512-5ZZ5+YGmUE01yejiXsKnTcvhakMZ2UllZlMsQni53Doc1JWhe21ia8VntRoRD6fAEWw08JBh/z9qQHJ+//MrIg==
"@types/aria-query@^4.2.0":
version "4.2.0"
resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.0.tgz#14264692a9d6e2fa4db3df5e56e94b5e25647ac0"
integrity sha512-iIgQNzCm0v7QMhhe4Jjn9uRh+I6GoPmt03CbEtwx3ao8/EfoQcmgtqH4vQ5Db/lxiIGaWDv6nwvunuh0RyX0+A==
"@types/aria-query@^5.0.1":
version "5.0.4"
resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.4.tgz#1a31c3d378850d2778dabb6374d036dcba4ba708"
integrity sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==
"@types/async@^3.2.3":
version "3.2.15"
@ -11157,7 +11155,7 @@
resolved "https://registry.yarnpkg.com/@types/rbush/-/rbush-3.0.0.tgz#b6887d99b159e87ae23cd14eceff34f139842aa6"
integrity sha512-W3ue/GYWXBOpkRm0VSoifrP3HV0Ni47aVJWvXyWMcbtpBy/l/K/smBRiJ+fI8f7shXRjZBiux+iJzYbh7VmcZg==
"@types/react-dom@<18.0.0", "@types/react-dom@~18.2.0":
"@types/react-dom@~18.2.0":
version "18.2.25"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.25.tgz#2946a30081f53e7c8d585eb138277245caedc521"
integrity sha512-o/V48vf4MQh7juIKZU2QGDfli6p1+OOi5oXx36Hffpc9adsHeXjVp8rHuPkjd8VT8sOJ2Zp05HR7CdpGTIUFUA==
@ -12632,7 +12630,7 @@ aria-hidden@^1.2.2:
dependencies:
tslib "^2.0.0"
aria-query@^5.0.0, aria-query@^5.1.3:
aria-query@5.3.0, aria-query@^5.0.0, aria-query@^5.1.3:
version "5.3.0"
resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
@ -22555,7 +22553,7 @@ luxon@^1.25.0:
resolved "https://registry.yarnpkg.com/luxon/-/luxon-1.28.1.tgz#528cdf3624a54506d710290a2341aa8e6e6c61b0"
integrity sha512-gYHAa180mKrNIUJCbwpmD0aTu9kV0dREDrwNnuyFAsO1Wt0EVYSZelPnJlbj9HplzXX/YWXHFTL45kvZ53M0pw==
lz-string@^1.4.4:
lz-string@^1.4.4, lz-string@^1.5.0:
version "1.5.0"
resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==