From 822aaa0406095f3276a435e96d417b9ecf340307 Mon Sep 17 00:00:00 2001 From: Mark Lawlor Date: Wed, 6 Aug 2025 10:15:00 +1000 Subject: [PATCH] feat: react-native-css/compiler & react-native-css/jest --- package.json | 22 +++++++++++++++++++ src/__tests__/vendor/tailwind.test.tsx | 3 ++- src/jest/index.ts | 9 ++++---- .../native/__tests__/attributes.test.tsx | 3 ++- src/runtime/native/__tests__/calc.test.tsx | 3 ++- src/runtime/native/__tests__/colors.test.tsx | 3 ++- .../__tests__/container-queries.test.tsx | 3 ++- src/runtime/native/__tests__/env.test.ios.tsx | 3 ++- .../native/__tests__/grouping.test.tsx | 3 ++- .../native/__tests__/media-query.test.tsx | 9 ++------ .../native/__tests__/selector-prefix.test.tsx | 15 +++++++------ .../native/__tests__/selectors.test.tsx | 9 ++------ .../native/__tests__/specificity.test.tsx | 3 ++- .../native/__tests__/style-updating.test.tsx | 9 ++------ .../native/__tests__/text-shadow.test.ios.tsx | 3 ++- .../native/__tests__/transform.test.tsx | 3 ++- src/runtime/native/__tests__/units.test.tsx | 3 ++- .../native/__tests__/upgrading.test.tsx | 3 ++- .../native/__tests__/variables.test.tsx | 3 ++- 19 files changed, 66 insertions(+), 46 deletions(-) diff --git a/package.json b/package.json index 09d7e3b1..c22ff8e1 100644 --- a/package.json +++ b/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": { diff --git a/src/__tests__/vendor/tailwind.test.tsx b/src/__tests__/vendor/tailwind.test.tsx index 93787eba..d02df0fc 100644 --- a/src/__tests__/vendor/tailwind.test.tsx +++ b/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 diff --git a/src/jest/index.ts b/src/jest/index.ts index de4b6ce5..3e6678c6 100644 --- a/src/jest/index.ts +++ b/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 { - // 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); }); diff --git a/src/runtime/native/__tests__/attributes.test.tsx b/src/runtime/native/__tests__/attributes.test.tsx index 180f50e7..78e1814c 100644 --- a/src/runtime/native/__tests__/attributes.test.tsx +++ b/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; }`); diff --git a/src/runtime/native/__tests__/calc.test.tsx b/src/runtime/native/__tests__/calc.test.tsx index 868aadf8..e157c04f 100644 --- a/src/runtime/native/__tests__/calc.test.tsx +++ b/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)", () => { diff --git a/src/runtime/native/__tests__/colors.test.tsx b/src/runtime/native/__tests__/colors.test.tsx index 00606ad6..5c58ad12 100644 --- a/src/runtime/native/__tests__/colors.test.tsx +++ b/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", () => { diff --git a/src/runtime/native/__tests__/container-queries.test.tsx b/src/runtime/native/__tests__/container-queries.test.tsx index a967b3d4..e0e66887 100644 --- a/src/runtime/native/__tests__/container-queries.test.tsx +++ b/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"; diff --git a/src/runtime/native/__tests__/env.test.ios.tsx b/src/runtime/native/__tests__/env.test.ios.tsx index eca4f794..8f3ddb79 100644 --- a/src/runtime/native/__tests__/env.test.ios.tsx +++ b/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 { diff --git a/src/runtime/native/__tests__/grouping.test.tsx b/src/runtime/native/__tests__/grouping.test.tsx index 4345d952..dec5ff1d 100644 --- a/src/runtime/native/__tests__/grouping.test.tsx +++ b/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"; diff --git a/src/runtime/native/__tests__/media-query.test.tsx b/src/runtime/native/__tests__/media-query.test.tsx index 2169ccc0..7ac82e50 100644 --- a/src/runtime/native/__tests__/media-query.test.tsx +++ b/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"; diff --git a/src/runtime/native/__tests__/selector-prefix.test.tsx b/src/runtime/native/__tests__/selector-prefix.test.tsx index a74cc797..9860294c 100644 --- a/src/runtime/native/__tests__/selector-prefix.test.tsx +++ b/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( - , - ).getByTestId(testID); + render(); + + const component = screen.getByTestId(testID); expect(component.props.style).toStrictEqual({ color: "#f00", @@ -20,9 +21,9 @@ test("class prefix", () => { selectorPrefix: ".test", }); - const component = render( - , - ).getByTestId(testID); + render(); + + const component = screen.getByTestId(testID); expect(component.props.style).toStrictEqual({ color: "#f00", diff --git a/src/runtime/native/__tests__/selectors.test.tsx b/src/runtime/native/__tests__/selectors.test.tsx index 489c34fc..633d957a 100644 --- a/src/runtime/native/__tests__/selectors.test.tsx +++ b/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"; diff --git a/src/runtime/native/__tests__/specificity.test.tsx b/src/runtime/native/__tests__/specificity.test.tsx index 22dd5b9a..179c93f0 100644 --- a/src/runtime/native/__tests__/specificity.test.tsx +++ b/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"; diff --git a/src/runtime/native/__tests__/style-updating.test.tsx b/src/runtime/native/__tests__/style-updating.test.tsx index 2742a9c5..088ecbe0 100644 --- a/src/runtime/native/__tests__/style-updating.test.tsx +++ b/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(` diff --git a/src/runtime/native/__tests__/text-shadow.test.ios.tsx b/src/runtime/native/__tests__/text-shadow.test.ios.tsx index 6203c362..8b45ea72 100644 --- a/src/runtime/native/__tests__/text-shadow.test.ios.tsx +++ b/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(" ", () => { diff --git a/src/runtime/native/__tests__/transform.test.tsx b/src/runtime/native/__tests__/transform.test.tsx index 57e812e3..636b5c2d 100644 --- a/src/runtime/native/__tests__/transform.test.tsx +++ b/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%; }`); diff --git a/src/runtime/native/__tests__/units.test.tsx b/src/runtime/native/__tests__/units.test.tsx index aa5d8277..7c1d4607 100644 --- a/src/runtime/native/__tests__/units.test.tsx +++ b/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 { diff --git a/src/runtime/native/__tests__/upgrading.test.tsx b/src/runtime/native/__tests__/upgrading.test.tsx index d16c382d..d5ef196f 100644 --- a/src/runtime/native/__tests__/upgrading.test.tsx +++ b/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"; diff --git a/src/runtime/native/__tests__/variables.test.tsx b/src/runtime/native/__tests__/variables.test.tsx index 0da2c9ac..3b507d26 100644 --- a/src/runtime/native/__tests__/variables.test.tsx +++ b/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";