mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 01:13:23 -04:00
fccfd4cf75
## Summary Part of https://github.com/elastic/kibana/issues/138222 in @types/react@18 types [have become more strict](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210). This PR addresses a bunch of easy fixes. The most common are: ### 1 Removal of implicit children For components that do implement children but relied on their implicit declaration from React.FunctionComponent or React.Component: ```diff interface Props { + children?: React.ReactNode; } class SomeClassComponents React.Component<Props> { render() { return <div>{this.props.children}</div> } } const SomeFunctionComponent: React.FunctionComponent<Props> = props => <div>{props.children}</div> ``` or ```diff - const SomeFunctionComponent: React.FunctionComponent<Props> = props => <div>{props.children}</div> + const SomeFunctionComponent: React.FunctionComponent<React.PropsWithChildren<Props>> = props => <div>{props.children}</div> ``` *Note 1:* The most common change occurs in unit tests where `renderHook` and `wrapper` are used. I had to re-type the props so that `children` were there ```diff const { result } = renderHook( () => { return useLicense(); }, { - wrapper: ({ children }) => ( + wrapper: ({ children }: React.PropsWithChildren<{}>) => ( <TestProviders license={license}>{children}</TestProviders> ), } ); ``` ```diff - const { result } = renderHook<GetCasesColumn, UseCasesColumnsReturnValue>( + const { result } = renderHook<React.PropsWithChildren<GetCasesColumn>, UseCasesColumnsReturnValue>( () => useCasesColumns(defaultColumnArgs), { wrapper: ({ children }) => <TestProviders>{children}</TestProviders>, } ); ``` *Note 2:* With @types/react@17 the components that don't have any props apart from `children` I had to use `React.PropsWithChildren<{}>`, whereas in @types/react@18 the argument becomes optional, so it can be omitted, and type simpler with `React.PropsWithChildren` without an argument ### 2 `this.context` becomes `unknown` (was `any`) In a couple of places where `this.context` is used, I had to type it ### 3 `ComponentType` from enzyme is no longer compatible with `ComponentType` from react This one is a bummer, but where `wrappingComponent` with enzyme is used I had to cast it to type from `enzyme` ```diff - import { mount } from 'enzyme' + import { mount, ComponentType } from 'enzyme' wrapper = mount(<ClosureOptions {...props} />, { - wrappingComponent: TestProviders, + wrappingComponent: TestProviders as ComponentType<{}>, }); ``` |
||
|---|---|---|
| .. | ||
| kibana_context | ||
| kibana_mount | ||