remix-run · mcansh · Aug 18, 2021 · Aug 10, 2021 · Aug 10, 2021 · Aug 10, 2021
diff --git a/docs/guides/styling.md b/docs/guides/styling.md
@@ -222,12 +222,11 @@ Here's some sample code to show how you might use Styled Components with Remix:
        </StylesContext.Provider>
      );
 
+     responseHeaders.set("Content-Type","text/html")
+
      return new Response("<!DOCTYPE html>" + markup, {
        status: responseStatusCode,
-       headers: {
-         ...Object.fromEntries(responseHeaders),
-         "Content-Type": "text/html"
-       }
+       headers: responseHeaders
      });
    }
    ```

diff --git a/fixtures/gists-app/app/entry.server.jsx b/fixtures/gists-app/app/entry.server.jsx
@@ -11,11 +11,10 @@ export default function handleRequest(
     <RemixServer context={remixContext} url={request.url} />
   );
 
+  responseHeaders.set("Content-Type", "text/html");
+
   return new Response("<!DOCTYPE html>" + markup, {
     status: responseStatusCode,
-    headers: {
-      ...Object.fromEntries(responseHeaders),
-      "Content-Type": "text/html"
-    }
+    headers: responseHeaders
   });
 }
diff --git a/fixtures/gists-app/app/routes/index.jsx b/fixtures/gists-app/app/routes/index.jsx
@@ -75,6 +75,9 @@ export default function Index() {
               Render error in nested route with ErrorBoundary
             </Link>
           </li>
+          <li>
+            <Link to="/multiple-set-cookies">Multiple Set Cookie Headers</Link>
+          </li>
 
           <li>
             <Link to="prefs">Preferences</Link>

diff --git a/fixtures/gists-app/app/routes/multiple-set-cookies.tsx b/fixtures/gists-app/app/routes/multiple-set-cookies.tsx
@@ -0,0 +1,40 @@
+import * as React from "react";
+import type {
+  ActionFunction,
+  LoaderFunction,
+  MetaFunction,
+  RouteComponent
+} from "remix";
+import { redirect, json, Headers, Form } from "remix";
+
+let loader: LoaderFunction = async ({ request }) => {
+  let headers = new Headers();
+  headers.append("Set-Cookie", "foo=bar");
+  headers.append("Set-Cookie", "bar=baz");
+  return json({}, { headers });
+};
+
+let action: ActionFunction = async () => {
+  let headers = new Headers();
+  headers.append("Set-Cookie", "another=one");
+  headers.append("Set-Cookie", "how-about=two");
+  return redirect("/multiple-set-cookies", { headers });
+};
+
+let meta: MetaFunction = () => ({
+  title: "Multi Set Cookie Headers"
+});
+
+let MultipleSetCookiesPage: RouteComponent = () => {
+  return (
+    <>
+      <p>👋</p>
+      <Form method="post">
+        <button type="submit">Add cookies</button>
+      </Form>
+    </>
+  );
+};
+
+export default MultipleSetCookiesPage;
+export { action, loader, meta };
diff --git a/fixtures/gists-app/tests/__snapshots__/server-html-test.ts.snap b/fixtures/gists-app/tests/__snapshots__/server-html-test.ts.snap
@@ -29,6 +29,7 @@ exports[`the server HTML for the root URL is correct 1`] = `
             >Render error in nested route with ErrorBoundary</a
           >
         </li>
+        <li><a href=\\"/multiple-set-cookies\\">Multiple Set Cookie Headers</a></li>
         <li><a href=\\"/prefs\\">Preferences</a></li>
       </ul>
     </nav>

diff --git a/fixtures/gists-app/tests/multiple-set-cookies-test.ts b/fixtures/gists-app/tests/multiple-set-cookies-test.ts
@@ -0,0 +1,36 @@
+import type { Browser, Page } from "puppeteer";
+import puppeteer from "puppeteer";
+
+import { collectResponses } from "./utils";
+
+const testPort = 3000;
+const testServer = `http://localhost:${testPort}`;
+
+describe("can set multiple set cookies headers", () => {
+  let browser: Browser;
+  let page: Page;
+
+  beforeEach(async () => {
+    browser = await puppeteer.launch();
+    page = await browser.newPage();
+  });
+
+  afterEach(() => browser.close());
+
+  describe("loader headers", () => {
+    it("are correct", async () => {
+      let responses = collectResponses(
+        page,
+        url => url.pathname === "/multiple-set-cookies"
+      );
+
+      await page.goto(`${testServer}/multiple-set-cookies`);
+
+      expect(responses).toHaveLength(1);
+      expect(responses[0].headers()["set-cookie"]).toMatchInlineSnapshot(`
+        "foo=bar
+        bar=baz"
+      `);
+    });
+  });
+});
diff --git a/fixtures/tutorial/app/entry.server.tsx b/fixtures/tutorial/app/entry.server.tsx
@@ -12,11 +12,10 @@ export default function handleRequest(
     <RemixServer context={remixContext} url={request.url} />
   );
 
+  responseHeaders.set("Content-Type", "text/html");
+
   return new Response("<!DOCTYPE html>" + markup, {
     status: responseStatusCode,
-    headers: {
-      ...Object.fromEntries(responseHeaders),
-      "Content-Type": "text/html"
-    }
+    headers: responseHeaders
   });
 }
diff --git a/jest.config.js b/jest.config.js
@@ -5,16 +5,28 @@ module.exports = {
       testEnvironment: "node",
       testMatch: ["<rootDir>/packages/remix-dev/**/*-test.[jt]s?(x)"]
     },
+    {
+      displayName: "node",
+      testEnvironment: "node",
+      testMatch: ["<rootDir>/packages/remix-node/**/*-test.[jt]s?(x)"]
+    },
+    // Node Adapters
+    {
+      displayName: "architect",
+      testEnvironment: "node",
+      testMatch: ["<rootDir>/packages/remix-architect/**/*-test.[jt]s?(x)"]
+    },
     {
       displayName: "express",
       testEnvironment: "node",
       testMatch: ["<rootDir>/packages/remix-express/**/*-test.[jt]s?(x)"]
     },
     {
-      displayName: "node",
+      displayName: "vercel",
       testEnvironment: "node",
-      testMatch: ["<rootDir>/packages/remix-node/**/*-test.[jt]s?(x)"]
+      testMatch: ["<rootDir>/packages/remix-vercel/**/*-test.[jt]s?(x)"]
     },
+    // Fixture Apps
     {
       displayName: "gists-app",
       testEnvironment: "node",