mirror of
https://github.com/lucide-icons/lucide.git
synced 2026-11-12 13:38:32 +00:00
fix(packages/react-native): pass testID to the rendered Svg element (#4881)
The Icon component destructured `testID` out of its props and re-emitted it as `data-testid`, which is a web attribute. react-native-svg only forwards `testID` to the native view (see extractProps) and drops `data-testid`, so `<Icon testID="my-icon" />` rendered an element that no React Native test query or UI automation tool can find. `LucideProps` extends `SvgProps`, so the prop type checks and the failure is silent. v0 spread `testID` straight onto `Svg`, so this is a regression for React Native consumers. An explicitly passed `data-testid` still reaches the element through the remaining props, so nothing is lost for react-native-web users. The react-native-svg test mock now maps `testID` onto `data-testid`, so the DOM based test suite identifies elements the way React Native does. Every existing `testID` test fails against the previous behaviour.
This commit is contained in:
@@ -4,8 +4,9 @@ import type { LucideProps } from '../../src/createReactComponent';
|
|||||||
export type { SvgProps } from 'react-native-svg';
|
export type { SvgProps } from 'react-native-svg';
|
||||||
|
|
||||||
const createComponent = function (name: string) {
|
const createComponent = function (name: string) {
|
||||||
const component = (props: LucideProps) => {
|
// React Native identifies elements by `testID`, the DOM equivalent is `data-testid`
|
||||||
return React.createElement(name, props, props.children);
|
const component = ({ testID, ...props }: LucideProps) => {
|
||||||
|
return React.createElement(name, { ...props, 'data-testid': testID }, props.children);
|
||||||
};
|
};
|
||||||
|
|
||||||
component.displayName = name;
|
component.displayName = name;
|
||||||
|
|||||||
@@ -107,7 +107,7 @@ const Icon = forwardRef<SVGSVGElement, IconComponentProps>(
|
|||||||
{
|
{
|
||||||
ref,
|
ref,
|
||||||
...toNativeSvgAttributes(svgAttributes),
|
...toNativeSvgAttributes(svgAttributes),
|
||||||
'data-testid': testID,
|
testID,
|
||||||
...rest,
|
...rest,
|
||||||
},
|
},
|
||||||
[
|
[
|
||||||
|
|||||||
@@ -47,6 +47,17 @@ describe('Using Icon Component', () => {
|
|||||||
expect(container.firstChild).toBeDefined();
|
expect(container.firstChild).toBeDefined();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should pass the testID to the rendered element', async () => {
|
||||||
|
const { container, getByTestId } = render(
|
||||||
|
<Icon
|
||||||
|
iconNode={airVent}
|
||||||
|
testID="air-vent-icon"
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(getByTestId('air-vent-icon')).toBe(container.firstChild);
|
||||||
|
});
|
||||||
|
|
||||||
it('should support nonScalingStroke', async () => {
|
it('should support nonScalingStroke', async () => {
|
||||||
const { container } = render(
|
const { container } = render(
|
||||||
<Icon
|
<Icon
|
||||||
|
|||||||
Reference in New Issue
Block a user