mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 01:13:23 -04:00
[React@18] Upgrade @testing-library/react
(#198918)
This commit is contained in:
parent
4eda49f0cf
commit
c8227a2694
17 changed files with 128 additions and 58 deletions
|
@ -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",
|
||||
|
|
10
packages/kbn-test/src/jest/mocks/react_dom_client_mock.ts
Normal file
10
packages/kbn-test/src/jest/mocks/react_dom_client_mock.ts
Normal 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 {};
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
};
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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(() => {});
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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(() => {
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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)"`
|
||||
);
|
||||
|
|
|
@ -116,6 +116,8 @@ const waitForModalLoad = async (options?: {
|
|||
|
||||
describe('rules_settings_modal', () => {
|
||||
beforeEach(async () => {
|
||||
jest.clearAllMocks();
|
||||
|
||||
const [
|
||||
{
|
||||
application: { capabilities },
|
||||
|
|
38
yarn.lock
38
yarn.lock
|
@ -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==
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue