diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..13ee2b0
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "nuxt.isNuxtApp": false
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 90f7b65..f47161e 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "@mui/icons-material": "^5.15.10",
     "@mui/material": "^5.15.10",
     "@reduxjs/toolkit": "^2.2.1",
+    "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 225efce..97a8b35 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ dependencies:
   '@reduxjs/toolkit':
     specifier: ^2.2.1
     version: 2.2.1(react-redux@9.1.0)(react@18.2.0)
+  '@testing-library/dom':
+    specifier: ^9.3.4
+    version: 9.3.4
   '@testing-library/jest-dom':
     specifier: ^5.17.0
     version: 5.17.0
diff --git a/src/components/Nugget.test.tsx b/src/components/Nugget.test.tsx
new file mode 100644
index 0000000..18b84e5
--- /dev/null
+++ b/src/components/Nugget.test.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { render, fireEvent, screen} from '@testing-library/react';
+import Nugget from './Nugget';
+
+test('renders Nugget component', () => {
+  const result = render(<Nugget text="Hello, world!" />);
+  expect(result.container.querySelector(".text")?.textContent).toContain("Hello, world!");
+});
+
+test('updates score when up arrow is clicked', () => {
+  const result = render(<Nugget text="Hello, world!" initialScore={0} />);
+  // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+  const upButton = result.container.querySelector(".incScore");
+  if (upButton) fireEvent.click(upButton);
+  expect(result.container.querySelector(".score")?.textContent).toBe("+1");
+});
+
+test('updates score when down arrow is clicked', () => {
+  const result = render(<Nugget text="Hello, world!" initialScore={0} />);
+  // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+  const downButton = result.container.querySelector(".decScore");
+  if (downButton) fireEvent.click(downButton);
+  expect(result.container.querySelector(".score")?.textContent).toBe("-1");
+});
diff --git a/src/components/Nugget.tsx b/src/components/Nugget.tsx
index 1e37a3f..1a76c5e 100644
--- a/src/components/Nugget.tsx
+++ b/src/components/Nugget.tsx
@@ -14,10 +14,10 @@ export default function Nugget({ text, initialScore }: { text: string, initialSc
             <span className='score'>{score > 0 ? "+" + score : score}</span>
             <span className='buttons'>
             <ButtonGroup size="small" orientation='vertical'>
-                <Button onClick={() => setScore(score + 1)}>
+                <Button onClick={() => setScore(score + 1)} className='incScore'>
                     <KeyboardArrowUpIcon />
                 </Button>
-                <Button onClick={() => setScore(score - 1)}>
+                <Button onClick={() => setScore(score - 1)} className='decScore'>
                     <KeyboardArrowDownIcon />
                 </Button>
             </ButtonGroup>