fix: fix react deps error (#32)

* fix(dev-deps): fix React v18 dependancy error

* test(utils): override @testing-library/react render method

* test(app): import @testing-library/react methods from override util

template.json

@@ -83,7 +83,7 @@
             "@commitlint/config-conventional": "^16.2.1",
             "@crestron/ch5-utilities-cli": "^0.1.52",
             "@testing-library/jest-dom": "^5.16.2",
-            "@testing-library/react": "^12.1.4",
+            "@testing-library/react": "^13.1.1",
             "@testing-library/user-event": "^13.5.0",
             "@types/jest": "^27.4.1",
             "@types/ncp": "^2.0.5",

template/src/App.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "./utils/test-utils";
 import App from "./App";
 
 test("renders learn react link", () => {

template/src/utils/test-utils/index.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { render as rtlRender } from "@testing-library/react";
+import { configureStore } from "@reduxjs/toolkit";
+import { Provider } from "react-redux";
+
+import controlSystemReducer from "../../redux/state/controlSystem";
+import webXPanelReducer from "../../redux/state/webXPanel";
+
+function render(
+    ui: React.ReactElement,
+    {
+        store = configureStore({
+            reducer: {
+                controlSystem: controlSystemReducer,
+                webXPanel: webXPanelReducer,
+            },
+        }),
+        ...renderOptions
+    } = {},
+) {
+    function Wrapper({ children }: { children: React.ReactNode }) {
+        return <Provider store={store}>{children}</Provider>;
+    }
+
+    return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
+}
+
+export * from "@testing-library/react";
+
+export { render };