From 353ca607b47960fa772ab68463961993a95bac6d Mon Sep 17 00:00:00 2001 From: Vincent Langlet Date: Wed, 23 Jan 2019 17:11:49 +0100 Subject: [PATCH 1/4] Handle ComponentType --- types/enzyme/index.d.ts | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/types/enzyme/index.d.ts b/types/enzyme/index.d.ts index 0818b4e5ce..58e5938a8f 100644 --- a/types/enzyme/index.d.ts +++ b/types/enzyme/index.d.ts @@ -27,7 +27,9 @@ export interface ComponentClass { new(props: Props, context?: any): Component; } -export type StatelessComponent = (props: Props, context?: any) => JSX.Element; +export type StatelessComponent = (props: Props, context?: any) => JSX.Element | null; + +export type ComponentType = ComponentClass | StatelessComponent; /** * Many methods in Enzyme's API accept a selector as an argument. Selectors in Enzyme can fall into one of the @@ -372,8 +374,8 @@ export class ShallowWrapper

{ * Find every node in the render tree that matches the provided selector. * @param selector The selector to match. */ - find(component: ComponentClass): ShallowWrapper; find(statelessComponent: StatelessComponent): ShallowWrapper; + find(component: ComponentType): ShallowWrapper; find(props: EnzymePropSelector): ShallowWrapper; find(selector: string): ShallowWrapper; @@ -381,8 +383,8 @@ export class ShallowWrapper

{ * Removes nodes in the current wrapper that do not match the provided selector. * @param selector The selector to match. */ - filter(component: ComponentClass): ShallowWrapper; filter(statelessComponent: StatelessComponent): ShallowWrapper; + filter(component: ComponentType): ShallowWrapper; filter(props: EnzymePropSelector | string): ShallowWrapper; /** @@ -394,8 +396,8 @@ export class ShallowWrapper

{ * Returns a new wrapper with all of the children of the node(s) in the current wrapper. Optionally, a selector * can be provided and it will filter the children by this selector. */ - children(component: ComponentClass): ShallowWrapper; children(statelessComponent: StatelessComponent): ShallowWrapper; + children(component: ComponentType): ShallowWrapper; children(selector: string): ShallowWrapper; children(props?: EnzymePropSelector): ShallowWrapper; @@ -425,8 +427,8 @@ export class ShallowWrapper

{ * * Note: can only be called on a wrapper of a single node. */ - parents(component: ComponentClass): ShallowWrapper; parents(statelessComponent: StatelessComponent): ShallowWrapper; + parents(component: ComponentType): ShallowWrapper; parents(selector: string): ShallowWrapper; parents(props?: EnzymePropSelector): ShallowWrapper; @@ -436,8 +438,8 @@ export class ShallowWrapper

{ * * Note: can only be called on a wrapper of a single node. */ - closest(component: ComponentClass): ShallowWrapper; closest(statelessComponent: StatelessComponent): ShallowWrapper; + closest(component: ComponentType): ShallowWrapper; closest(props: EnzymePropSelector): ShallowWrapper; closest(selector: string): ShallowWrapper; @@ -487,8 +489,8 @@ export class ReactWrapper

{ * Find every node in the render tree that matches the provided selector. * @param selector The selector to match. */ - find(component: ComponentClass): ReactWrapper; find(statelessComponent: StatelessComponent): ReactWrapper; + find(component: ComponentType): ReactWrapper; find(props: EnzymePropSelector): ReactWrapper; find(selector: string): ReactWrapper; @@ -501,16 +503,16 @@ export class ReactWrapper

{ * Removes nodes in the current wrapper that do not match the provided selector. * @param selector The selector to match. */ - filter(component: ComponentClass): ReactWrapper; filter(statelessComponent: StatelessComponent): ReactWrapper; + filter(component: ComponentType): ReactWrapper; filter(props: EnzymePropSelector | string): ReactWrapper; /** * Returns a new wrapper with all of the children of the node(s) in the current wrapper. Optionally, a selector * can be provided and it will filter the children by this selector. */ - children(component: ComponentClass): ReactWrapper; children(statelessComponent: StatelessComponent): ReactWrapper; + children(component: ComponentType): ReactWrapper; children(selector: string): ReactWrapper; children(props?: EnzymePropSelector): ReactWrapper; @@ -526,8 +528,8 @@ export class ReactWrapper

{ * * Note: can only be called on a wrapper of a single node. */ - parents(component: ComponentClass): ReactWrapper; parents(statelessComponent: StatelessComponent): ReactWrapper; + parents(component: ComponentType): ReactWrapper; parents(selector: string): ReactWrapper; parents(props?: EnzymePropSelector): ReactWrapper; @@ -537,8 +539,8 @@ export class ReactWrapper

{ * * Note: can only be called on a wrapper of a single node. */ - closest(component: ComponentClass): ReactWrapper; closest(statelessComponent: StatelessComponent): ReactWrapper; + closest(component: ComponentType): ReactWrapper; closest(props: EnzymePropSelector): ReactWrapper; closest(selector: string): ReactWrapper; From e92ff96b548a1056de14b2a1f1f905f9826abbc9 Mon Sep 17 00:00:00 2001 From: Vincent Langlet Date: Fri, 25 Jan 2019 10:18:29 +0100 Subject: [PATCH 2/4] Add tests --- types/enzyme/enzyme-tests.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/types/enzyme/enzyme-tests.tsx b/types/enzyme/enzyme-tests.tsx index 0711243d0c..879f06dc3c 100644 --- a/types/enzyme/enzyme-tests.tsx +++ b/types/enzyme/enzyme-tests.tsx @@ -35,6 +35,10 @@ interface MyComponentState { stateProperty: string; } +function toComponentType(Component: ComponentClass | StatelessComponent): ComponentClass | StatelessComponent { + return Component; +} + class MyComponent extends Component { handleEcho(value: string) { return value; @@ -59,6 +63,8 @@ const MyStatelessComponent = (props: StatelessProps) => ; const AnotherStatelessComponent = (props: AnotherStatelessProps) => ; +const ComponentType = toComponentType(MyComponent); + // Enzyme.configure function configureTest() { const configureAdapter: { adapter: EnzymeAdapter } = { adapter: {} }; @@ -859,6 +865,14 @@ function ReactWrapperTest() { reactWrapper = new ReactWrapper(, undefined, { attachTo: document.createElement('div') }); reactWrapper = new ReactWrapper(, reactWrapper, { attachTo: document.createElement('div') }); } + + function test_component_type() { + const wrapper1 = shallow(

); + wrapper1.find(ComponentType); + + const wrapper2 = mount(
); + wrapper2.find(ComponentType); + } } // CheerioWrapper From daac60683d589dc6dd84ad6c61f9c0a9bd4a7b3d Mon Sep 17 00:00:00 2001 From: Vincent Langlet Date: Sat, 26 Jan 2019 13:08:10 +0100 Subject: [PATCH 3/4] Update enzyme-tests.tsx --- types/enzyme/enzyme-tests.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/types/enzyme/enzyme-tests.tsx b/types/enzyme/enzyme-tests.tsx index 879f06dc3c..b92f553584 100644 --- a/types/enzyme/enzyme-tests.tsx +++ b/types/enzyme/enzyme-tests.tsx @@ -868,10 +868,10 @@ function ReactWrapperTest() { function test_component_type() { const wrapper1 = shallow(
); - wrapper1.find(ComponentType); + wrapper1.find(ComponentType).props().stringProp; // $ExpectType string const wrapper2 = mount(
); - wrapper2.find(ComponentType); + wrapper2.find(ComponentType).props().stringProp; // $ExpectType string } } From fba358da45c6dda900a64c299bb08055de535e65 Mon Sep 17 00:00:00 2001 From: Vincent Langlet Date: Sat, 26 Jan 2019 13:27:05 +0100 Subject: [PATCH 4/4] Update enzyme-tests.tsx --- types/enzyme/enzyme-tests.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/types/enzyme/enzyme-tests.tsx b/types/enzyme/enzyme-tests.tsx index b92f553584..0c7e2c2e90 100644 --- a/types/enzyme/enzyme-tests.tsx +++ b/types/enzyme/enzyme-tests.tsx @@ -868,10 +868,10 @@ function ReactWrapperTest() { function test_component_type() { const wrapper1 = shallow(
); - wrapper1.find(ComponentType).props().stringProp; // $ExpectType string + wrapper1.find(ComponentType).props().stringProp; // $ExpectType string const wrapper2 = mount(
); - wrapper2.find(ComponentType).props().stringProp; // $ExpectType string + wrapper2.find(ComponentType).props().stringProp; // $ExpectType string } }