Skip to content

Commit

Permalink
fix(components): FalsyFC should be able to render components with hooks
Browse files Browse the repository at this point in the history
  • Loading branch information
Photonios authored Apr 26, 2020
1 parent b813ad2 commit 5ba8daf
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,6 @@ export class FalsyFC<Props = {}> extends React.Component<FalsyFCProps<Props>> {
return fallback || null;
}

return component(props as Props);
return React.createElement(component, props as Props);
}
}
22 changes: 22 additions & 0 deletions src/components/devsupport/components/falsyFC/falsyFC.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,25 @@ it('should render fallback component', function () {

expect(textComponent).toBeTruthy();
});

it('should be able to render components with hooks', function () {
const ComponentWithHooks = () => {
const [text, setText ] = React.useState('');

React.useEffect(() => {
setText('I love Babel');
}, []);

return <Text>{text}</Text>;
};

const component = render(
<FalsyFC
component={ComponentWithHooks}
/>,
);

const textComponent = component.getByText('I love Babel');

expect(textComponent).toBeTruthy();
});
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export class FalsyText extends React.Component<FalsyTextProps> {
}

if (typeof component === 'function') {
return component(textProps as TextProps);
return React.createElement(component, textProps as TextProps);
}

return (
Expand Down
22 changes: 22 additions & 0 deletions src/components/devsupport/components/falsyText/falsyText.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,3 +40,25 @@ it('should render ui kitten text', function () {

expect(textComponent).toBeTruthy();
});

it('should be able to render components with hooks', function () {
const ComponentWithHooks = () => {
const [text, setText ] = React.useState('');

React.useEffect(() => {
setText('I love Babel');
}, []);

return <Text>{text}</Text>;
};

const component = render(
<FalsyText
component={ComponentWithHooks}
/>,
);

const textComponent = component.getByText('I love Babel');

expect(textComponent).toBeTruthy();
});

0 comments on commit 5ba8daf

Please sign in to comment.