installed react testing library

.storybook/preview.js

@@ -1,9 +1,22 @@
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
-}
+  backgrounds: {
+    default: 'dark',
+    values: [
+      {
+        name: 'dark',
+        value: '#141414',
+      },
+      {
+        name: 'light',
+        value: '#fff',
+      },
+    ],
+  },
+}

package-lock.json

@@ -51,6 +51,7 @@
         "@storybook/preset-create-react-app": "^4.1.2",
         "@storybook/react": "^6.5.13",
         "@storybook/testing-library": "^0.0.13",
+        "@testing-library/react": "^13.4.0",
         "babel-loader": "^9.1.0",
         "babel-plugin-named-exports-order": "^0.0.2",
         "clean-webpack-plugin": "^4.0.0",
@@ -13367,6 +13368,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/@testing-library/react": {
+      "version": "13.4.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.4.0.tgz",
+      "integrity": "sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@testing-library/dom": "^8.5.0",
+        "@types/react-dom": "^18.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/@testing-library/user-event": {
       "version": "13.5.0",
       "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz",
@@ -49763,6 +49782,17 @@
         }
       }
     },
+    "@testing-library/react": {
+      "version": "13.4.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.4.0.tgz",
+      "integrity": "sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@testing-library/dom": "^8.5.0",
+        "@types/react-dom": "^18.0.0"
+      }
+    },
     "@testing-library/user-event": {
       "version": "13.5.0",
       "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz",

package.json

@@ -57,6 +57,7 @@
     "@storybook/preset-create-react-app": "^4.1.2",
     "@storybook/react": "^6.5.13",
     "@storybook/testing-library": "^0.0.13",
+    "@testing-library/react": "^13.4.0",
     "babel-loader": "^9.1.0",
     "babel-plugin-named-exports-order": "^0.0.2",
     "clean-webpack-plugin": "^4.0.0",

src/components/Button/__tests__/Button.stories.tsx

@@ -8,6 +8,22 @@ import PlayLogo from '../../../static/images/play-button.svg'
 export default {
   title: 'Button',
   component: Button,
+  parameters: {
+    parameters: {
+      backgrounds: {
+        default: '#141414',
+        values: [
+          { name: 'dark', value: '#141414' },
+          { name: 'light', value: '#fff' },
+        ],
+      },
+    },
+    docs: {
+      description: {
+        component: 'Primary and secondary styles for all buttons',
+      },
+    },
+  },
 } as ComponentMeta<typeof Button>
 
 const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />