support optional redux array merging + update deps

Author: Raice Hannay

package.json

@@ -3,7 +3,7 @@
   "author": "Raice Hannay <[email protected]>",
   "description": "A set of classes to make setting up React components for unit tests easy.",
   "license": "ISC",
-  "version": "3.0.5",
+  "version": "3.1.0",
   "keywords": [
     "component",
     "enzyme",
@@ -75,16 +75,16 @@
   "devDependencies": {
     "@testing-library/react": "^12.0.0",
     "@types/enzyme": "^3.10.12",
-    "@types/jest": "^29.0.2",
+    "@types/jest": "^29.0.3",
     "@types/react": "^17.0.14",
     "@types/react-redux": "^7.1.24",
-    "@typescript-eslint/eslint-plugin": "^5.37.0",
-    "@typescript-eslint/parser": "^5.37.0",
+    "@typescript-eslint/eslint-plugin": "^5.38.1",
+    "@typescript-eslint/parser": "^5.38.1",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "cross-env": "^7.0.3",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
-    "eslint": "^8.23.1",
+    "eslint": "^8.24.0",
     "eslint-config-voodoocreation": "^3.0.2",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^27.0.4",
@@ -99,11 +99,11 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-intl": "^6.1.1",
-    "react-redux": "^8.0.2",
+    "react-redux": "^8.0.4",
     "redux": "^4.2.0",
     "rimraf": "^3.0.2",
-    "ts-jest": "^29.0.1",
-    "typescript": "^4.8.3",
+    "ts-jest": "^29.0.2",
+    "typescript": "^4.8.4",
     "typescript-fsa": "^3.0.0",
     "typescript-fsa-reducers": "^1.2.2"
   },

src/enzyme/WrapperWithRedux.test.tsx

@@ -6,6 +6,7 @@ import { ReduxDummy } from "../../test/ReduxDummy";
 
 const initialState = {
   test: {
+    array: ["item-a"],
     value: "Default value",
   },
 };
@@ -62,6 +63,20 @@ describe("WrapperWithRedux", () => {
       expect(wrapper.find(".Dummy--value").text()).toBe("Test value");
     });
 
+    it("doesn't merge arrays when withMergedReduxArrays(false) is used", () => {
+      const wrapper = component
+        .withMergedReduxArrays(false)
+        .withReduxState({
+          test: {
+            array: ["item-b"],
+          },
+        })
+        .mount();
+
+      expect(wrapper.find("li")).toHaveLength(1);
+      expect(wrapper.find("li").text()).toBe("item-b");
+    });
+
     it("clears test-specific reduxState after previous test and uses default reduxState again", () => {
       const wrapper = component.mount();
 
@@ -171,6 +186,7 @@ describe("WrapperWithRedux", () => {
     it("updates the store", () => {
       expect(wrapper.store.getState()).toEqual({
         test: {
+          array: initialState.test.array,
           value: payload,
         },
       });

src/enzyme/WrapperWithRedux.tsx

@@ -20,6 +20,11 @@ export default abstract class WrapperWithRedux<
 > extends Wrapper<C, P> {
   // region Properties that remain throughout instance lifecycle
 
+  /**
+   * Determines whether arrays in Redux state are merged when rendering the component.
+   */
+  protected isMergingReduxArrays = true;
+
   /**
    * The default Redux store state for all test scenarios for the current test suite.
    *
@@ -63,9 +68,24 @@ export default abstract class WrapperWithRedux<
    * Returns the merged Redux store state used by the current test scenario
    */
   protected get mergedReduxState(): S {
-    return merge(this.defaultReduxState, this.scenarioReduxState) as S;
+    return merge.withOptions(
+      { mergeArrays: this.isMergingReduxArrays },
+      this.defaultReduxState,
+      this.scenarioReduxState
+    ) as S;
   }
 
+  /**
+   * Toggles whether to merge arrays in the Redux state
+   *
+   * @param value The new value
+   */
+  public withMergedReduxArrays = (value: boolean) => {
+    this.isMergingReduxArrays = value;
+
+    return this;
+  };
+
   /**
    * Sets the default Redux store state used by all test scenarios for the current test suite.
    *

src/enzyme/__snapshots__/WrapperWithRedux.test.tsx.snap

@@ -10,6 +10,15 @@ exports[`WrapperWithRedux when using the different render methods when using 'mo
     >
       Default value
     </div>
+    <ul
+      className="Dummy--array"
+    >
+      <li
+        key="item-a"
+      >
+        item-a
+      </li>
+    </ul>
     <div
       className="Dummy--children"
     />

src/react-testing-library/WrapperWithRedux.test.tsx

@@ -6,6 +6,7 @@ import { ReduxDummy } from "../../test/ReduxDummy";
 
 const initialState = {
   test: {
+    array: ["item-a"],
     value: "Default value",
   },
 };
@@ -33,6 +34,21 @@ describe("WrapperWithRedux", () => {
       expect(getByText("Test value")).toBeDefined();
     });
 
+    it("doesn't merge arrays when withMergedReduxArrays(false) is used", () => {
+      const { getByText, queryByText, queryAllByRole } = component
+        .withMergedReduxArrays(false)
+        .withReduxState({
+          test: {
+            array: ["item-b"],
+          },
+        })
+        .render();
+
+      expect(queryAllByRole("listitem")).toHaveLength(1);
+      expect(getByText("item-b")).toBeDefined();
+      expect(queryByText("item-a")).toBeNull();
+    });
+
     it("clears test-specific reduxState after previous test and uses default reduxState again", () => {
       const { getByText } = component.render();
 
@@ -139,6 +155,7 @@ describe("WrapperWithRedux", () => {
     it("updates the store", () => {
       expect(result.store.getState()).toEqual({
         test: {
+          array: initialState.test.array,
           value: payload,
         },
       });

src/react-testing-library/WrapperWithRedux.tsx

@@ -32,6 +32,11 @@ export default abstract class WrapperWithRedux<
 > extends Wrapper<C, P> {
   // region Properties that remain throughout instance lifecycle
 
+  /**
+   * Determines whether arrays in Redux state are merged when rendering the component.
+   */
+  protected isMergingReduxArrays = true;
+
   /**
    * The default Redux store state for all test scenarios for the current test suite.
    *
@@ -75,9 +80,24 @@ export default abstract class WrapperWithRedux<
    * Returns the merged Redux store state used by the current test scenario
    */
   protected get mergedReduxState(): S {
-    return merge(this.defaultReduxState, this.scenarioReduxState) as S;
+    return merge.withOptions(
+      { mergeArrays: this.isMergingReduxArrays },
+      this.defaultReduxState,
+      this.scenarioReduxState
+    ) as S;
   }
 
+  /**
+   * Toggles whether to merge arrays in the Redux state
+   *
+   * @param value The new value
+   */
+  public withMergedReduxArrays = (value: boolean) => {
+    this.isMergingReduxArrays = value;
+
+    return this;
+  };
+
   /**
    * Sets the default Redux store state used by all test scenarios for the current test suite.
    *

test/ReduxDummy.tsx

@@ -12,6 +12,7 @@ export const ReduxDummy = ({ children }: IProps) => {
   const dispatch = useDispatch();
 
   const value = useSelector(selectors.getValue);
+  const array = useSelector(selectors.getArray);
 
   const onClick = React.useCallback(() => {
     dispatch(actions.setValue("Click"));
@@ -20,6 +21,11 @@ export const ReduxDummy = ({ children }: IProps) => {
   return (
     <div className="Dummy">
       <div className="Dummy--value">{value}</div>
+      <ul className="Dummy--array">
+        {array.map((item) => (
+          <li key={item}>{item}</li>
+        ))}
+      </ul>
       <div className="Dummy--children">{children}</div>
       <button className="Dummy--button" type="button" onClick={onClick}>
         Button

test/reducer.ts

@@ -4,10 +4,12 @@ import { reducerWithInitialState } from "typescript-fsa-reducers";
 import * as actions from "./actions";
 
 export interface ITestState {
+  array: string[];
   value: string;
 }
 
 const testInitialState: ITestState = {
+  array: [],
   value: "",
 };
 

test/selectors.ts

@@ -1,3 +1,5 @@
 import { TStoreState } from "./store";
 
 export const getValue = (store: TStoreState) => store.test.value;
+
+export const getArray = (store: TStoreState) => store.test.array;