DOMのテストを追加

dom/index.html

@@ -12,6 +12,6 @@
 </section>
 
 </body>
-<script src="./script.js"></script>
+<script type="module" src="./script.js"></script>
 </html>
 

dom/script.js

@@ -1,12 +1,16 @@
-const link = document.querySelector("a");
-link.textContent = "REDIMPULZ";
-link.href = "https://redimpulz.com/";
+export const main = () => {
+  const link = document.querySelector("a");
+  link.textContent = "REDIMPULZ";
+  link.href = "https://redimpulz.com/";
 
-const section = document.querySelector("section");
-const p = document.createElement("p");
-p.textContent = "We hope you enjoy JavaScript.";
-section.appendChild(p);
-p.setAttribute("class", "highlight");
+  const section = document.querySelector("section");
+  const p = document.createElement("p");
+  p.textContent = "We hope you enjoy JavaScript.";
+  section.appendChild(p);
+  p.setAttribute("class", "highlight");
 
-const temp = document.querySelector("#temp");
-section.removeChild(temp);
+  const temp = document.querySelector("#temp");
+  section.removeChild(temp);
+};
+
+window.addEventListener("load", main);

dom/script.test.ts

@@ -0,0 +1,35 @@
+import { test, expect, describe, beforeEach } from "vitest";
+import { screen } from "@testing-library/dom";
+
+import { main } from "./script";
+
+beforeEach(() => {
+  document.body.innerHTML = `
+    <a data-testid="a" href=""></a>
+    <section data-testid="section">
+      <div data-testid="temp" id="temp">temp content</div>
+    </section>
+  `;
+});
+
+describe("", () => {
+  test("リンクが正しく追加されている", () => {
+    main();
+    const a = screen.queryByTestId<HTMLAnchorElement>("a");
+    expect(a?.textContent).toEqual("REDIMPULZ");
+    expect(a?.href).toEqual("https://redimpulz.com/");
+  });
+
+  test("section要素の下に指定の要素が追加されている", () => {
+    main();
+    const section = screen.queryByTestId("section");
+    expect(section).toContainHTML(
+      '<p class="highlight">We hope you enjoy JavaScript.</p>'
+    );
+  });
+
+  test("IDがtempの要素が削除されている", () => {
+    main();
+    expect(screen.queryByTestId("temp")).toEqual(null);
+  });
+});

package.json

@@ -6,6 +6,8 @@
   "author": "Ken Takahashi <[email protected]>",
   "license": "MIT",
   "devDependencies": {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.3",
     "@vitest/coverage-v8": "^0.34.1",
     "jest": "^29.6.2",
     "vitest": "^0.34.1"
@@ -17,5 +19,8 @@
   "volta": {
     "node": "18.17.1",
     "yarn": "1.22.19"
+  },
+  "dependencies": {
+    "happy-dom": "^12.9.0"
   }
 }

testSetup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";

vitest.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "happy-dom",
+    setupFiles: "./testSetup.ts",
+  },
+});