Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 15 commits into from
Nov 11, 2024
Merged

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

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
b5fdc8b
bump testing library
Dosant Nov 5, 2024
d509329
Merge branch 'main' of github.com:elastic/kibana into react18/bump-te…
Dosant Nov 5, 2024
2bdd98d
focus on unit
Dosant Nov 5, 2024
bf93455
fix renderHook
Dosant Nov 5, 2024
fb7b8e1
fix types
Dosant Nov 5, 2024
1320f6d
fix failed tests
Dosant Nov 5, 2024
f168f32
revert scoped tests
Dosant Nov 5, 2024
722a63f
link a clean up issue to the comments
Dosant Nov 6, 2024
09573a7
Merge branch 'main' of github.com:elastic/kibana into react18/bump-te…
Dosant Nov 6, 2024
989fb10
Fix add_comment tests.
adcoelho Nov 7, 2024
0a9c257
better fix for ecs
Dosant Nov 7, 2024
ed2d951
respect testing-library’s intention to mute act warnings in some cases
Dosant Nov 7, 2024
886fa4e
add comment
Dosant Nov 7, 2024
3c08a79
Merge branch 'main' into react18/bump-testing-library
elasticmachine Nov 8, 2024
2229964
Merge branch 'main' into react18/bump-testing-library
elasticmachine Nov 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1517,9 +1517,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",
Expand Down
10 changes: 10 additions & 0 deletions packages/kbn-test/src/jest/mocks/react_dom_client_mock.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {};
4 changes: 4 additions & 0 deletions packages/kbn-test/src/jest/resolver.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,10 @@ module.exports = (request, options) => {
});
}

if (request === 'react-dom/client') {
return Path.resolve(__dirname, 'mocks/react_dom_client_mock.ts');
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're just mocking this with an {}, this API from React@18 won't be used because we're forcing legacyRoot:true. Just need to it help to resolve the modules. This mock can be removed with an upgrade to React@18

}

if (request === `elastic-apm-node`) {
return APM_AGENT_MOCK;
}
Expand Down
12 changes: 12 additions & 0 deletions packages/kbn-test/src/jest/setup/react_testing_library.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,15 @@ 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 */

jest.mock('@testing-library/react', () => {
const actual = jest.requireActual('@testing-library/react');

return {
...actual,
render: (ui, options) => actual.render(ui, { ...options, legacyRoot: true }),
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Forcing legacyRoot:true by default makes testing library to use legacy API ReactDOM.render api which is how we make it work with React@17.
The option is documented here https://testing-library.com/docs/react-testing-library/api/#legacyroot .

There is no global configuration for this option, so we have to do this mocking workaround to adjust the default.

Event after upgrade of the react packages to React@18 it would make sense to keep this option as it until we start upgrading to the Concurrent Mode. We will likely come of a gradual transition plan in parallel with the runtime.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah same thing here as above, I feel at minimum we need a comment to track this.

renderHook: (render, options) => actual.renderHook(render, { ...options, legacyRoot: true }),
};
});
2 changes: 1 addition & 1 deletion x-pack/packages/kbn-ai-assistant/src/utils/get_timeline_items_from_conversation.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion ...ard/impl/data_quality_panel/data_quality_summary/summary_actions/check_all/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -403,10 +403,10 @@ describe('CheckAll', () => {

// simulate the wall clock advancing
for (let i = 0; i < totalIndexNames + 1; i++) {
await waitFor(() => {});
Copy link
Contributor Author

@Dosant Dosant Nov 5, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This test seem to rely on some very specific internal timings that apparently have changed. I found that adding another waitFor fixes the tests. Feel free to take a look and contribute to make it more robust

act(() => {
jest.advanceTimersByTime(1000 * 10);
});

await waitFor(() => {});
}
});
Expand Down
7 changes: 7 additions & 0 deletions x-pack/plugins/cases/public/components/add_comment/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,13 @@ describe('AddComment ', () => {
});

it('should render spinner and disable submit when loading', async () => {
createAttachmentsMock.mockImplementation(
() =>
new Promise((resolve) => {
/* empty promise that never resolves to test loading state */
adcoelho marked this conversation as resolved.
Show resolved Hide resolved
})
);

appMockRender.render(<AddComment {...{ ...addCommentProps, showLoading: true }} />);

fireEvent.change(screen.getByLabelText('caseComment'), {
Expand Down
4 changes: 3 additions & 1 deletion x-pack/plugins/cases/public/components/create/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
});
4 changes: 2 additions & 2 deletions x-pack/plugins/kubernetes_security/public/test/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion ...onents/shared/transaction_action_menu/__snapshots__/transaction_action_menu.test.tsx.snap
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion x-pack/plugins/security_solution/public/common/mock/endpoint/app_context_render.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
6 changes: 6 additions & 0 deletions ...ection_engine/rule_creation/components/related_integrations/related_integrations.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/session_view/public/test/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/stack_connectors/public/connector_types/lib/test_utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/triggers_actions_ui/public/application/components/health_check.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)"`
);
Expand Down
2 changes: 2 additions & 0 deletions ...gers_actions_ui/public/application/components/rules_setting/rules_settings_modal.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,8 @@ const waitForModalLoad = async (options?: {

describe('rules_settings_modal', () => {
beforeEach(async () => {
jest.clearAllMocks();

const [
{
application: { capabilities },
Expand Down
38 changes: 18 additions & 20 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9871,18 +9871,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":
Expand All @@ -9906,14 +9906,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"
Expand Down Expand Up @@ -10138,10 +10136,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"
Expand Down Expand Up @@ -11155,7 +11153,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==
Expand Down Expand Up @@ -12635,7 +12633,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==
Expand Down Expand Up @@ -22747,7 +22745,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==
Expand Down