config babel to support typescript, add a snapshot test code for the …

…button component

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    presets: [
+      ['@babel/preset-env', {targets: {node: 'current'}}],
+      ['@babel/preset-react', {runtime: 'automatic'}],
+      '@babel/preset-typescript',
+    ],
+  };

package.json

@@ -34,7 +34,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "jest",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -56,6 +56,12 @@
     ]
   },
   "devDependencies": {
-    "babel-plugin-macros": "^3.1.0"
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "babel-jest": "^29.4.2",
+    "babel-plugin-macros": "^3.1.0",
+    "jest": "^29.4.2",
+    "react-test-renderer": "^18.2.0"
   }
 }

src/components/button/__snapshots__/button.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`changes the class when hovered 1`] = `
+<button
+  className="sc-dkrFOg sc-eDvSVe bAenDU iJPJvM"
+>
+  Test
+</button>
+`;

src/components/button/button.test.js

@@ -0,0 +1,11 @@
+import renderer from 'react-test-renderer';
+import Button, { BUTTON_TYPES }  from './button.component';
+
+it('changes the class when hovered', () => {
+  const component = renderer.create(
+    <Button buttonType={BUTTON_TYPES.inverted}>Test</Button>,
+  );
+  let tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+  }
+);