feat: react-native-css/compiler & react-native-css/jest

package.json

@@ -27,6 +27,28 @@
         "default": "./dist/commonjs/metro/index.js"
       }
     },
+    "./compiler": {
+      "source": "./src/compiler/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/compiler/index.d.ts",
+        "default": "./dist/module/compiler/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/compiler/index.d.ts",
+        "default": "./dist/commonjs/compiler/index.js"
+      }
+    },
+    "./jest": {
+      "source": "./src/jest/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/jest/index.d.ts",
+        "default": "./dist/module/jest/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/jest/index.d.ts",
+        "default": "./dist/commonjs/jest/index.js"
+      }
+    },
     "./babel": {
       "source": "./src/babel/index.ts",
       "import": {

src/__tests__/vendor/tailwind.test.tsx

@@ -1,5 +1,6 @@
+import { render, screen } from "@testing-library/react-native";
 import { View } from "react-native-css/components/View";
-import { registerCSS, render, screen, testID } from "react-native-css/jest";
+import { registerCSS, testID } from "react-native-css/jest";
 
 /**
  * Tailwind CSS utilities

src/jest/index.ts

@@ -1,26 +1,25 @@
-/* eslint-disable @typescript-eslint/no-namespace */
-import { Dimensions } from "react-native";
+import { Appearance, Dimensions } from "react-native";
 
 import { compile, type CompilerOptions } from "../compiler";
 import { StyleCollection } from "../runtime/native/injection";
 import { colorScheme, dimensions, rem } from "../runtime/native/reactivity";
 
 declare global {
+  /* eslint-disable @typescript-eslint/no-namespace */
   namespace jest {
     interface Matchers<R> {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      toHaveAnimatedStyle(style?: any): R;
+      toHaveAnimatedStyle(style?: unknown): R;
     }
   }
 }
 
-export * from "@testing-library/react-native";
 export const testID = "react-native-css";
 
 beforeEach(() => {
   StyleCollection.styles.clear();
   dimensions.set(Dimensions.get("window"));
   rem.set(14);
+  Appearance.setColorScheme(null);
   colorScheme.set(null);
 });
 

src/runtime/native/__tests__/attributes.test.tsx

@@ -1,6 +1,7 @@
+import { render, screen } from "@testing-library/react-native";
 import { Text } from "react-native-css/components/Text";
 import { View } from "react-native-css/components/View";
-import { registerCSS, render, screen, testID } from "react-native-css/jest";
+import { registerCSS, testID } from "react-native-css/jest";
 
 test(":disabled", () => {
   registerCSS(`.test:disabled { width: 10px; }`);

src/runtime/native/__tests__/calc.test.tsx

@@ -1,5 +1,6 @@
+import { render, screen } from "@testing-library/react-native";
 import { View } from "react-native-css/components/View";
-import { registerCSS, render, screen, testID } from "react-native-css/jest";
+import { registerCSS, testID } from "react-native-css/jest";
 
 describe("css", () => {
   test("calc(10px + 100px)", () => {

src/runtime/native/__tests__/colors.test.tsx

@@ -1,5 +1,6 @@
+import { render, screen } from "@testing-library/react-native";
 import { View } from "react-native-css/components/View";
-import { registerCSS, render, screen, testID } from "react-native-css/jest";
+import { registerCSS, testID } from "react-native-css/jest";
 
 describe("hsl", () => {
   test("inline", () => {

src/runtime/native/__tests__/container-queries.test.tsx

@@ -1,5 +1,6 @@
+import { fireEvent, render, screen } from "@testing-library/react-native";
 import { View } from "react-native-css/components/View";
-import { fireEvent, registerCSS, render, screen } from "react-native-css/jest";
+import { registerCSS } from "react-native-css/jest";
 
 const parentID = "parent";
 const childID = "child";

src/runtime/native/__tests__/env.test.ios.tsx

@@ -1,6 +1,7 @@
 // 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, render, screen, testID } from "react-native-css/jest";
+import { registerCSS, testID } from "react-native-css/jest";
 
 test.skip("safe-area-inset-*", () => {
   registerCSS(`.my-class {

src/runtime/native/__tests__/grouping.test.tsx

@@ -1,5 +1,6 @@
+import { fireEvent, render, screen } from "@testing-library/react-native";
 import { View } from "react-native-css/components/View";
-import { fireEvent, registerCSS, render, screen } from "react-native-css/jest";
+import { registerCSS } from "react-native-css/jest";
 
 // import { getAnimatedStyle } from "react-native-reanimated";
 

src/runtime/native/__tests__/media-query.test.tsx

@@ -1,13 +1,8 @@
 import { PixelRatio } from "react-native";
 
+import { act, render, screen } from "@testing-library/react-native";
 import { View } from "react-native-css/components/View";
-import {
-  act,
-  registerCSS,
-  render,
-  screen,
-  testID,
-} from "react-native-css/jest";
+import { registerCSS, testID } from "react-native-css/jest";
 
 import { colorScheme } from "../api";
 import { dimensions } from "../reactivity";

src/runtime/native/__tests__/selector-prefix.test.tsx

@@ -1,14 +1,15 @@
+import { render, screen } from "@testing-library/react-native";
 import { View } from "react-native-css/components/View";
-import { registerCSS, render, testID } from "react-native-css/jest";
+import { registerCSS, testID } from "react-native-css/jest";
 
 test("type prefix", () => {
   registerCSS(`html .my-class { color: red; }`, {
     selectorPrefix: "html",
   });
 
-  const component = render(
-    <View testID={testID} className="my-class" />,
-  ).getByTestId(testID);
+  render(<View testID={testID} className="my-class" />);
+
+  const component = screen.getByTestId(testID);
 
   expect(component.props.style).toStrictEqual({
     color: "#f00",
@@ -20,9 +21,9 @@ test("class prefix", () => {
     selectorPrefix: ".test",
   });
 
-  const component = render(
-    <View testID={testID} className="my-class" />,
-  ).getByTestId(testID);
+  render(<View testID={testID} className="my-class" />);
+
+  const component = screen.getByTestId(testID);
 
   expect(component.props.style).toStrictEqual({
     color: "#f00",

src/runtime/native/__tests__/selectors.test.tsx

@@ -1,11 +1,6 @@
+import { act, render, screen } from "@testing-library/react-native";
 import { View } from "react-native-css/components/View";
-import {
-  act,
-  registerCSS,
-  render,
-  screen,
-  testID,
-} from "react-native-css/jest";
+import { registerCSS, testID } from "react-native-css/jest";
 
 import { colorScheme } from "../api";
 

src/runtime/native/__tests__/specificity.test.tsx

@@ -1,7 +1,8 @@
 import { StyleSheet, type ViewProps } from "react-native";
 
+import { fireEvent, render } from "@testing-library/react-native";
 import { Text } from "react-native-css/components/Text";
-import { fireEvent, registerCSS, render, testID } from "react-native-css/jest";
+import { registerCSS, testID } from "react-native-css/jest";
 
 import { styled } from "../api";
 

src/runtime/native/__tests__/style-updating.test.tsx

@@ -1,11 +1,6 @@
+import { act, render, screen } from "@testing-library/react-native";
 import { View } from "react-native-css/components/View";
-import {
-  act,
-  registerCSS,
-  render,
-  screen,
-  testID,
-} from "react-native-css/jest";
+import { registerCSS, testID } from "react-native-css/jest";
 
 test("should update styles", () => {
   registerCSS(`

src/runtime/native/__tests__/text-shadow.test.ios.tsx

@@ -1,5 +1,6 @@
+import { render, screen } from "@testing-library/react-native";
 import { Text } from "react-native-css/components/Text";
-import { registerCSS, render, screen, testID } from "react-native-css/jest";
+import { registerCSS, testID } from "react-native-css/jest";
 
 describe("text-shadow", () => {
   test("<offsetX> <offsetY>", () => {

src/runtime/native/__tests__/transform.test.tsx

@@ -1,5 +1,6 @@
+import { render } from "@testing-library/react-native";
 import { View } from "react-native-css/components/View";
-import { registerCSS, render, testID } from "react-native-css/jest";
+import { registerCSS, testID } from "react-native-css/jest";
 
 test("translate", () => {
   registerCSS(`.my-class { translate: 10%; }`);

src/runtime/native/__tests__/units.test.tsx

@@ -1,6 +1,7 @@
 import { View } from "react-native";
 
-import { act, registerCSS, renderHook } from "react-native-css/jest";
+import { act, renderHook } from "@testing-library/react-native";
+import { registerCSS } from "react-native-css/jest";
 
 import { useNativeCss } from "../react/useNativeCss";
 import {

src/runtime/native/__tests__/upgrading.test.tsx

@@ -1,6 +1,7 @@
+import { render, screen } from "@testing-library/react-native";
 import { Text } from "react-native-css/components/Text";
 import { View } from "react-native-css/components/View";
-import { registerCSS, render, screen } from "react-native-css/jest";
+import { registerCSS } from "react-native-css/jest";
 
 const parentID = "parent";
 const childID = "child";

src/runtime/native/__tests__/variables.test.tsx

@@ -1,8 +1,9 @@
 import { memo, useEffect } from "react";
 import type { ViewProps } from "react-native";
 
+import { render, screen } from "@testing-library/react-native";
 import { View } from "react-native-css/components/View";
-import { registerCSS, render, screen, testID } from "react-native-css/jest";
+import { registerCSS, testID } from "react-native-css/jest";
 
 import { styled } from "../api";