lucide/packages/lucide-react-native/tests/context.spec.tsx

import { cleanup, render } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import { House, LucideProvider } from '../src/lucide-react-native';

vi.mock('react-native-svg');

describe('Using LucideProvider', () => {
  it('should render the icon with LucideProvider', () => {
    cleanup();
    const { container } = render(
      <LucideProvider>
        <House />
      </LucideProvider>,
    );

    expect(container.firstChild).toMatchSnapshot();
  });

  it('should render the icon with LucideProvider and custom strokeWidth', () => {
    cleanup();
    const testId = 'house-icon';
    const { getByTestId } = render(
      <LucideProvider
        size={48}
        color="red"
        strokeWidth={4}
      >
        <House testID={testId} />
      </LucideProvider>,
    );

    const IconComponent = getByTestId(testId);

    expect(IconComponent).toHaveAttribute('width', '48');
    expect(IconComponent).toHaveAttribute('height', '48');
    expect(IconComponent).toHaveAttribute('stroke', 'red');
    expect(IconComponent).toHaveAttribute('stroke-width', '4');
  });

  it('should render the icon with LucideProvider and custom absoluteStrokeWidth', () => {
    cleanup();
    const { container } = render(
      <LucideProvider
        size={48}
        color="red"
        absoluteStrokeWidth
      >
        <House />
      </LucideProvider>,
    );

    const IconComponent = container.firstElementChild;

    expect(IconComponent).toHaveAttribute('stroke-width', '1');
  });

  it("should override the provider's global props when passing props to the icon", () => {
    cleanup();
    const { container } = render(
      <LucideProvider
        size={48}
        color="red"
        strokeWidth={4}
      >
        <House
          size={32}
          color="blue"
          strokeWidth={3}
        />
      </LucideProvider>,
    );

    const IconComponent = container.firstElementChild;

    expect(IconComponent).toHaveAttribute('width', '32');
    expect(IconComponent).toHaveAttribute('height', '32');
    expect(IconComponent).toHaveAttribute('stroke', 'blue');
    expect(IconComponent).toHaveAttribute('stroke-width', '3');
    expect(IconComponent).toHaveAttribute('stroke-width', '3');
  });
  it('should merge provider and icon className values', () => {
    cleanup();
    const testId = 'house-icon';
    const { getByTestId } = render(
      <LucideProvider className="provider-class">
        <House
          testID={testId}
          className="icon-class"
        />
      </LucideProvider>,
    );

    expect(getByTestId(testId)).toHaveAttribute(
      'class',
      'lucide lucide-house lucide-home provider-class icon-class',
    );
  });
});