Added Provider.FromValue, to enable mocking in Storybook and Unit Tests

src/index.tsx

@@ -24,10 +24,21 @@ type Hooks<
 // const [Provider, useContextValue] = constate(useValue)
 //       ^^^^^^^^^^^^^^^^^^^^^^^^^^^
 type ConstateTuple<Props, Value, Selectors extends Selector<Value>[]> = [
-  React.FC<Props>,
+  HookedProvider<Props, Value>,
   ...Hooks<Value, Selectors>
 ];
 
+// const [Provider, useContextValue] = constate(useValue)
+//        ^^^^^^^^
+type HookedProvider<Props, Value> = React.FC<React.PropsWithChildren<Props>> & {
+  FromValue: ValueProvider<Value>;
+};
+
+// const [Provider, useContextValue] = constate(useValue)
+// <Provider.FromValue value={value}> ... </Provider.FromValue>
+//           ^^^^^^^^^
+type ValueProvider<Value> = React.FC<React.PropsWithChildren<{ value: Value }>>;
+
 const isDev = process.env.NODE_ENV !== "production";
 
 const NO_PROVIDER = {};
@@ -65,8 +76,7 @@ function constate<Props, Value, Selectors extends Selector<Value>[]>(
     createContext(useValue.name);
   }
 
-  const Provider: React.FC<Props> = ({ children, ...props }) => {
-    const value = useValue(props as Props);
+  const Providers: ValueProvider<Value> = ({ children, value }) => {
     let element = children as React.ReactElement;
     for (let i = 0; i < contexts.length; i += 1) {
       const context = contexts[i];
@@ -77,6 +87,11 @@ function constate<Props, Value, Selectors extends Selector<Value>[]>(
     }
     return element;
   };
+  const Provider: HookedProvider<Props, Value> = ({ children, ...props }) => {
+    const value = useValue(props as Props);
+    return Providers({ value, children });
+  };
+  Provider.FromValue = Providers;
 
   if (isDev && useValue.name) {
     Provider.displayName = "Constate";

test/index.test.tsx

@@ -175,3 +175,103 @@ test("displayName with named useValue with selectors", () => {
   );
   expect(Provider.displayName).toBe("Constate");
 });
+
+describe("FromValue", () => {
+  test("no selectors", () => {
+    const [CounterProvider, useCounterContext] = constate(useCounter);
+    const Increment = () => {
+      const { increment } = useCounterContext();
+      return <button onClick={increment}>Increment</button>;
+    };
+    const Decrement = () => {
+      const { decrement } = useCounterContext();
+      return <button onClick={decrement}>Decrement</button>;
+    };
+    const Count = () => {
+      const { count } = useCounterContext();
+      return <div>{count}</div>;
+    };
+    const mockContextValue = {
+      count: 10,
+      increment: jest.fn(),
+      decrement: jest.fn(),
+    };
+    const MockApp = () => (
+      <CounterProvider.FromValue value={mockContextValue}>
+        <Increment />
+        <Decrement />
+        <Count />
+      </CounterProvider.FromValue>
+    );
+    const { getByText } = render(<MockApp />);
+    expect(getByText("10")).toBeDefined();
+
+    fireEvent.click(getByText("Increment"));
+    expect(getByText("10")).toBeDefined();
+    expect(mockContextValue.increment).toHaveBeenCalledTimes(1);
+
+    fireEvent.click(getByText("Decrement"));
+    expect(getByText("10")).toBeDefined();
+    expect(mockContextValue.decrement).toHaveBeenCalledTimes(1);
+  });
+
+  test("single selector", () => {
+    const [CounterProvider, useCount] = constate(
+      useCounter,
+      (value) => value.count
+    );
+    const Count = () => {
+      const count = useCount();
+      return <div>{count}</div>;
+    };
+    const mockContextValue = {
+      count: 10,
+      increment: jest.fn(),
+      decrement: jest.fn(),
+    };
+    const App = () => (
+      <CounterProvider.FromValue value={mockContextValue}>
+        <Count />
+      </CounterProvider.FromValue>
+    );
+    const { getByText } = render(<App />);
+    expect(getByText("10")).toBeDefined();
+  });
+
+  test("two selectors", () => {
+    const [CounterProvider, useCount, useIncrement] = constate(
+      useCounter,
+      (value) => value.count,
+      (value) => value.increment
+    );
+    const Increment = () => {
+      const increment = useIncrement();
+      return <button onClick={increment}>Increment</button>;
+    };
+    const Count = () => {
+      const count = useCount();
+      return <div>{count}</div>;
+    };
+    const mockContextValue = {
+      count: 10,
+      increment: jest.fn(),
+      decrement: jest.fn(),
+    };
+    const MockApp = () => (
+      <CounterProvider.FromValue value={mockContextValue}>
+        <Increment />
+        <Count />
+      </CounterProvider.FromValue>
+    );
+    const { getByText } = render(<MockApp />);
+    expect(getByText("10")).toBeDefined();
+
+    fireEvent.click(getByText("Increment"));
+    expect(getByText("10")).toBeDefined();
+    expect(mockContextValue.increment).toHaveBeenCalledTimes(1);
+
+    fireEvent.click(getByText("Increment"));
+    expect(getByText("10")).toBeDefined();
+    expect(mockContextValue.increment).toHaveBeenCalledTimes(2);
+  });
+});