feat: do more good stuff

jest.config.js

@@ -22,11 +22,6 @@ module.exports = {
   collectCoverageFrom: ["<rootDir>/src/**/*.{ts,tsx}"],
   setupFilesAfterEnv: ["./test/setup.ts"],
   snapshotResolver: "./test/resolve-snapshot.js",
-  globals: {
-    "ts-jest": {
-      babelConfig: true,
-    },
-  },
   transformIgnorePatterns: [],
   // This is the only part which you can keep
   // from the above linked tutorial's config:

package.json

@@ -23,6 +23,7 @@
     "@swc-node/core": "^1.6.0",
     "@swc-node/jest": "^1.3.2",
     "@testing-library/jest-native": "^4.0.2",
+    "@testing-library/react": "^12.1.1",
     "@testing-library/react-native": "^7.2.0",
     "@types/jest": "latest",
     "@types/react-native": "^0.65.3",
@@ -37,6 +38,7 @@
     "prettier": "latest",
     "react": "^17.0.2",
     "react-native": "^0.65.1",
+    "react-test-renderer": "^17.0.2",
     "ts-jest": "^27.0.5",
     "typescript": "latest"
   },
@@ -95,7 +97,10 @@
   "eslintConfig": {
     "extends": [
       "lunde"
-    ]
+    ],
+    "rules": {
+      "testing-library/prefer-screen-queries": "off"
+    }
   },
   "eslintIgnore": [
     "node_modules",
@@ -137,8 +142,8 @@
     "type-fest": "^2.3.4"
   },
   "peerDependencies": {
+    "@types/react-native": ">=0.20",
     "react": ">=16",
-    "react-native": ">=0.20",
-    "@types/react-native": ">=0.20"
+    "react-native": ">=0.20"
   }
 }

src/__snapshots__/index.test.tsx.snap

@@ -2,19 +2,25 @@
 
 exports[`styles() should pass 1`] = `
 Object {
-  "color": "red",
+  "color": "blue",
 }
 `;
 
 exports[`styles() should too pass 1`] = `
 Object {
-  "color": "red",
+  "marginBottom": 1,
+  "marginLeft": 1,
+  "marginRight": 1,
+  "marginTop": 1,
 }
 `;
 
 exports[`styles() should too pass 2 1`] = `
 Object {
-  "color": "red",
+  "marginBottom": 1,
+  "marginLeft": 1,
+  "marginRight": 1,
+  "marginTop": 1,
 }
 `;
 
@@ -31,6 +37,12 @@ Object {
 }
 `;
 
+exports[`styles.one() should also pass 1`] = `
+Object {
+  "color": "blue",
+}
+`;
+
 exports[`styles.one() should pass 1`] = `
 Object {
   "color": "red",

src/index.test.tsx

@@ -1,20 +1,27 @@
+import { render } from "@testing-library/react-native";
+import * as React from "react";
+import * as RN from "react-native";
+import "@testing-library/jest-native/extend-expect";
 import { createStyles } from "./index";
 
 describe("styles()", () => {
-  const { styles } = createStyles({
+  const { styles, styled } = createStyles({
     tokens: {
       spacing: [1, 2, 3, 4],
-    },
+    } as const,
   });
 
   it("should pass", () => {
     const style = styles({
       default: `
         color: red;
       `,
+      foo: {
+        color: "blue",
+      },
     });
 
-    expect(style("default")).toMatchSnapshot();
+    expect(style("default", "foo")).toMatchSnapshot();
   });
 
   it("should too pass", () => {
@@ -49,6 +56,28 @@ describe("styles()", () => {
 
     expect(style("default", "other")).toMatchSnapshot();
   });
+
+  it("should also pass", () => {
+    const StyledView = styled.View(({ spacing }) => ({
+      margin: spacing[0],
+    }));
+
+    const view = render(
+      <StyledView style="background-color: blue;" testID="foo" />
+    );
+
+    expect(view.getByTestId("foo")).toHaveStyle({
+      backgroundColor: "blue",
+      margin: 1,
+    });
+  });
+
+  it("should also pass 3", () => {
+    const StyledView = styled(RN.View, { backgroundColor: "blue" });
+    const view = render(<StyledView testID="foo" />);
+
+    expect(view.getByTestId("foo")).toHaveStyle({ backgroundColor: "blue" });
+  });
 });
 
 describe("styles.one()", () => {
@@ -64,6 +93,14 @@ describe("styles.one()", () => {
     `;
     expect(style()).toMatchSnapshot();
   });
+
+  it("should also pass", () => {
+    const style = styles.one<RN.TextStyle>(() => ({
+      color: "blue",
+    }));
+
+    expect(style()).toMatchSnapshot();
+  });
 });
 
 describe("styles.cls()", () => {