Add tests for nesting context

solidjs · Nov 22, 2023 · 91d3b18 · 91d3b18
1 parent af13719
commit 91d3b18
Showing 1 changed file with 37 additions and 1 deletion.
diff --git a/packages/solid/web/test/context.spec.tsx b/packages/solid/web/test/context.spec.tsx
@@ -110,7 +110,39 @@ describe("Testing Context", () => {
     expect(div.children[1].innerHTML).toBe("dark");
   });
 
-  const ThemeContextWithoutDefault = createContext<string>();
+  const ThemeContextWithUndefined = createContext<string | undefined>("light");
+  const ComponentWithUndefined = () => {
+    const theme = useContext(ThemeContextWithUndefined);
+    // ?? 'undefined' will never get reached
+    return <div>{theme ?? "undefined"}</div>;
+  };
+
+  it("should override when nesting", () => {
+    const div = document.createElement("div");
+    render(
+      () => (
+        <>
+          <ComponentWithUndefined />
+          <ThemeContextWithUndefined.Provider value="dark">
+            <ComponentWithUndefined />
+            <ThemeContextWithUndefined.Provider value="darker">
+              <ComponentWithUndefined />
+              <ThemeContextWithUndefined.Provider value={undefined}>
+                <ComponentWithUndefined />
+              </ThemeContextWithUndefined.Provider>
+            </ThemeContextWithUndefined.Provider>
+          </ThemeContextWithUndefined.Provider>
+        </>
+      ),
+      div
+    );
+    expect(div.children[0].innerHTML!).toBe("light");
+    expect(div.children[1].innerHTML!).toBe("dark");
+    expect(div.children[2].innerHTML!).toBe("darker");
+    expect(div.children[3].innerHTML!).toBe("light");
+  });
+
+  const ThemeContextWithoutDefault = createContext<string | undefined>();
   const ComponentWithoutDefault = () => {
     const theme = useContext(ThemeContextWithoutDefault);
     return <div>{theme ?? "no-default"}</div>;
@@ -124,12 +156,16 @@ describe("Testing Context", () => {
           <ComponentWithoutDefault />
           <ThemeContextWithoutDefault.Provider value="dark">
             <ComponentWithoutDefault />
+            <ThemeContextWithoutDefault.Provider value={undefined}>
+              <ComponentWithoutDefault />
+            </ThemeContextWithoutDefault.Provider>
           </ThemeContextWithoutDefault.Provider>
         </>
       ),
       div
     );
     expect(div.children[0].innerHTML!).toBe("no-default");
     expect(div.children[1].innerHTML!).toBe("dark");
+    expect(div.children[2].innerHTML!).toBe("no-default");
   });
 });