feat: Added Theme and migrate to emotion@10.x 🚀 (#286)

* chore: updated emotion dependency

* feat: introduced theme

* refactor: updated emotion styles

* fix: fixed emotion error

* fix: fixed tests

* chore: add missing types

Co-Authored-By: Thomas Klein <tmkn@users.noreply.github.com>

src/muiComponents/TextField/TextField.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { mount } from 'enzyme';
+
+import { render } from '../../utils/test-react-testing-library';
 
 import TextField from './TextField';
 
@@ -8,8 +9,8 @@ describe('<TextField /> component', () => {
     name: 'test',
     value: 'test',
   };
-  test('should render the component in default state', () => {
-    const wrapper = mount(<TextField name={props.name} value={props.value} />);
-    expect(wrapper.html()).toMatchSnapshot();
+  test('should load the component in default state', () => {
+    const { container } = render(<TextField name={props.name} value={props.value} />);
+    expect(container.firstChild).toMatchSnapshot();
   });
 });

src/muiComponents/TextField/__snapshots__/TextField.test.tsx.snap

@@ -1,3 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<TextField /> component should render the component in default state 1`] = `"<div class=\\"MuiFormControl-root MuiTextField-root\\"><div class=\\"MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl\\"><input aria-invalid=\\"false\\" name=\\"test\\" type=\\"text\\" class=\\"MuiInputBase-input MuiInput-input\\" value=\\"test\\"></div></div>"`;
+exports[`<TextField /> component should load the component in default state 1`] = `
+<div
+  class="MuiFormControl-root MuiTextField-root"
+>
+  <div
+    class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
+  >
+    <input
+      aria-invalid="false"
+      class="MuiInputBase-input MuiInput-input"
+      name="test"
+      type="text"
+      value="test"
+    />
+  </div>
+</div>
+`;