env.test.ios.tsx

// import { SafeAreaProvider } from "react-native-css/components/SafeAreaProvider";
import { render, screen } from "@testing-library/react-native";
import { View } from "react-native-css/components/View";
import { registerCSS, testID } from "react-native-css/jest";

test.skip("safe-area-inset-*", () => {
  registerCSS(`.my-class {
    margin-top: env(safe-area-inset-top);
    margin-bottom: env(safe-area-inset-bottom);
    margin-left: env(safe-area-inset-left);
    margin-right: env(safe-area-inset-right);
  }`);

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const SafeAreaProvider = View as any;

  render(
    <SafeAreaProvider
      initialMetrics={{
        insets: { top: 1, bottom: 2, left: 3, right: 4 },
        frame: { x: 0, y: 0, width: 0, height: 0 },
      }}
    >
      <View testID={testID} className="my-class" />
    </SafeAreaProvider>,
  );
  const component = screen.getByTestId(testID);

  expect(component.props.style).toStrictEqual({
    marginTop: 1,
    marginBottom: 2,
    marginLeft: 3,
    marginRight: 4,
  });
});