test(react-store): add initial tets for react store package

.gitignore

@@ -34,6 +34,7 @@ stats-hydration.json
 stats-react.json
 stats.html
 .vscode/settings.json
+.idea/
 
 *.log
 .DS_Store
@@ -47,4 +48,4 @@ ts-perf
 
 .netlify
 
-nx-cloud.env
+nx-cloud.env

package.json

@@ -27,6 +27,9 @@
     "overrides": {
       "@tanstack/store": "workspace:*",
       "@tanstack/react-store": "workspace:*"
+    },
+    "patchedDependencies": {
+      "@types/[email protected]": "patches/@[email protected]"
     }
   },
   "devDependencies": {
@@ -40,21 +43,25 @@
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-node-resolve": "^13.2.1",
     "@rollup/plugin-replace": "^4.0.0",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.4.3",
     "@tsconfig/svelte": "^3.0.0",
     "@types/luxon": "^2.3.1",
     "@types/node": "^17.0.25",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@types/semver": "^7.3.13",
+    "@types/testing-library__jest-dom": "5.14.5",
     "axios": "^0.26.1",
     "babel-plugin-transform-async-to-promises": "^0.8.18",
     "babel-preset-solid": "^1.5.4",
     "concurrently": "^7.1.0",
     "current-git-branch": "^1.1.0",
     "git-log-parser": "^1.2.0",
     "luxon": "^2.3.2",
+    "jsdom": "^22.0.0",
     "nx": "15.9.2",
     "nx-cloud": "^16.0.1",
     "prettier": "^2.8.1",

packages/react-store/package.json

@@ -19,7 +19,9 @@
     "url": "https://github.com/sponsors/tannerlinsley"
   },
   "scripts": {
-    "build": "rollup --config rollup.config.js"
+    "build": "rollup --config rollup.config.js",
+    "test": "vitest",
+    "test:dev": "vitest --watch"
   },
   "module": "build/esm/index.js",
   "main": "build/cjs/index.js",

packages/react-store/src/tests/index.test.tsx

@@ -0,0 +1,69 @@
+import {render, waitFor} from '@testing-library/react'
+import '@testing-library/jest-dom'
+import * as React from 'react'
+import {Store} from "@tanstack/store";
+import {useStore} from "../index";
+import {useState} from "react";
+import userEvent from "@testing-library/user-event";
+
+const user = userEvent.setup();
+
+describe('useStore', () => {
+  it('allows us to select state using a selector', async () => {
+    const store = new Store({
+      select: 0,
+      ignored: 1
+    })
+
+    function Comp() {
+      const storeVal = useStore(store, state => state.select)
+
+      return (
+        <p>Store: {storeVal}</p>
+      )
+    }
+
+    const { getByText } = render(<Comp />)
+    expect(getByText("Store: 0")).toBeInTheDocument()
+  })
+
+  it('only triggers a re-render when selector state is updated', async () => {
+    const store = new Store({
+      select: 0,
+      ignored: 1
+    })
+
+    function Comp() {
+      const storeVal = useStore(store, state => state.select)
+      const [fn] = useState(vi.fn)
+      fn();
+
+      return (
+        <div>
+          <p>Number rendered: {fn.mock.calls.length}</p>
+          <p>Store: {storeVal}</p>
+          <button onClick={() => store.setState(v => ({
+            ...v,
+            select: 10
+          }))}>Update select</button>
+          <button onClick={() => store.setState(v => ({
+            ...v,
+            ignored: 10
+          }))}>Update ignored</button>
+        </div>
+      )
+    }
+
+    const { getByText } = render(<Comp />)
+    expect(getByText("Store: 0")).toBeInTheDocument()
+    expect(getByText("Number rendered: 1")).toBeInTheDocument()
+
+    await user.click(getByText("Update select"))
+
+    await waitFor(() => expect(getByText("Store: 10")).toBeInTheDocument())
+    expect(getByText("Number rendered: 2")).toBeInTheDocument()
+
+    await user.click(getByText("Update ignored"))
+    expect(getByText("Number rendered: 2")).toBeInTheDocument()
+  })
+})

packages/react-store/tsconfig.json

@@ -2,7 +2,8 @@
   "composite": true,
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "./build/types"
+    "outDir": "./build/types",
+    "types": ["vitest/globals"]
   },
   "files": ["src/index.tsx"],
   "include": [

packages/react-store/vitest.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    name: 'store',
+    watch: false,
+    dir: './src',
+    environment: 'jsdom',
+    globals: true,
+    coverage: { provider: 'istanbul' },
+  },
+})

patches/@types__testing-library__jest-dom@5.14.5.patch

@@ -0,0 +1,22 @@
+diff --git a/index.d.ts b/index.d.ts
+index 43ba6b7fe458e77d152fe0b2f7afeac05d8fc563..979c61d461cc22711033ec43b9d7b749fa4a4396 100755
+--- a/index.d.ts
++++ b/index.d.ts
+@@ -7,12 +7,11 @@
+ // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ // Minimum TypeScript Version: 4.3
+
+-/// <reference types="jest" />
+-
+-import { TestingLibraryMatchers } from './matchers';
++import { TestingLibraryMatchers } from "./matchers";
+
+ declare global {
+-    namespace jest {
+-        interface Matchers<R = void, T = {}> extends TestingLibraryMatchers<typeof expect.stringContaining, R> {}
+-    }
++  namespace jest {
++    interface Matchers<R = void, T = {}>
++      extends TestingLibraryMatchers<typeof expect.stringContaining, R> {}
++  }
+ }