diff --git a/__tests__/create-store.spec.tsx b/__tests__/create-store.spec.tsx new file mode 100644 index 0000000..a37d338 --- /dev/null +++ b/__tests__/create-store.spec.tsx @@ -0,0 +1,77 @@ +import React, { Children } from "react"; +import { create, act } from "react-test-renderer"; +import { createUseStore } from "../src/create-store"; + +type State = { + data?: string; + isLoading?: boolean; +}; + +const defaultState: State = { + isLoading: true +}; + +const methods = { + setData: (_: State) => (data: string) => ({ + isLoading: false, + data + }) +}; + +const createUseTestStore = () => createUseStore(defaultState, methods); + +describe("React Localux", () => { + it("renders correctly initial state", () => { + const useStore = createUseTestStore(); + + function Root() { + return ( + + + + ); + } + + function Item() { + const { state } = useStore(); + return
{JSON.stringify(state)}
; + } + + const app = create(); + expect(app.root.findByType(Item).findByType("div").children).toEqual([ + JSON.stringify(defaultState) + ]); + }); + + it("renders correctly on method call", () => { + const useStore = createUseTestStore(); + + function Root() { + return ( + + + + + ); + } + + function State() { + const { state } = useStore(); + return <>{JSON.stringify(state)}; + } + + function ItemWithMethodCall() { + const { methods } = useStore(); + return ; + } + + const app = create(); + act(() => { + app.root.findByType("button").props.onClick(); + }); + + expect(app.root.findByType(State).children).toEqual([ + JSON.stringify({ isLoading: false, data: "test data" }) + ]); + }); +}); diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..c879c23 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,7 @@ +module.exports = { + presets: [ + "@babel/preset-env", + "@babel/preset-react", + "@babel/preset-typescript" + ] +}; diff --git a/example/example.tsx b/example/example.tsx index 968f3e3..cb8c0f6 100644 --- a/example/example.tsx +++ b/example/example.tsx @@ -58,7 +58,9 @@ function StateSlice() { return useMemo( () => (
-

This component rerenders only on error occurance

+

+ This component rerenders only on state.error changes (error on load) +

{`Rerender counter: ${stateSliceRerenderingCounter++}`}