Fix Jest Config And Make Tests Run

__mocks__/svgrMock.js

@@ -0,0 +1,4 @@
+import * as React from 'react'
+export default 'SvgrURL'
+const SvgrMock = React.forwardRef((props, ref) => <span ref={ref} {...props} />)
+export const ReactComponent = SvgrMock

jest.config.js

@@ -21,7 +21,7 @@ module.exports = {
 	// collectCoverageFrom: undefined,
 
 	// The directory where Jest should output its coverage files
-	coverageDirectory: "coverage",
+	coverageDirectory: '.coverage',
 
 	// An array of regexp pattern strings used to skip coverage collection
 	// coveragePathIgnorePatterns: [
@@ -76,7 +76,9 @@ module.exports = {
 	// ],
 
 	// A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
-	// moduleNameMapper: {},
+	moduleNameMapper: {
+		'\\.svg': '<rootDir>/__mocks__/svgrMock.js',
+	},
 
 	// An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
 	// modulePathIgnorePatterns: [],
@@ -123,7 +125,7 @@ module.exports = {
 	// setupFiles: [],
 
 	// A list of paths to modules that run some code to configure or set up the testing framework before each test
-	setupFilesAfterEnv: ["<rootDir>/setupTests.js"],
+	setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
 
 	// A list of paths to snapshot serializer modules Jest should use for snapshot testing
 	// snapshotSerializers: [],
@@ -167,9 +169,7 @@ module.exports = {
 	// transform: undefined,
 
 	// An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-	// transformIgnorePatterns: [
-	//   "/node_modules/"
-	// ],
+	transformIgnorePatterns: ['/node_modules/(?!@babel/runtime)'],
 
 	// An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
 	// unmockedModulePathPatterns: undefined,
@@ -182,4 +182,4 @@ module.exports = {
 
 	// Whether to use watchman for file crawling
 	// watchman: true,
-};
+}

packages/components/__tests__/__snapshots__/Button.test.js.snap

@@ -1,70 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Button component Should render custom button correctly 1`] = `
-<Memo(Button)
-  color="success"
-  size="large"
->
-  <button
-    css={
-      Object {
-        "map": undefined,
-        "name": "nynpfd",
-        "next": undefined,
-        "styles": "
-    
-    padding: 1rem 0.5rem;
+exports[`Button component Should render custom button correctly 1`] = `ReactWrapper {}`;
 
-    font-size: 2rem;
-
-    width: auto;
-  ;
-    border-radius: 0.25rem;
-    border-color: ;
-    border-style: solid;
-    border-width: 2px;
-    font-style: 'Lato','Helvetica Neue',Arial,Helvetica,sans-serif;
-    background-color: #56BA46;
-    color: #fff;
-  ",
-        "toString": [Function],
-      }
-    }
-  >
-    Hello Atlas
-  </button>
-</Memo(Button)>
-`;
-
-exports[`Button component Should render default button correctly 1`] = `
-<Memo(Button)>
-  <button
-    css={
-      Object {
-        "map": undefined,
-        "name": "1s1uxvy",
-        "next": undefined,
-        "styles": "
-    
-    padding: 0.75rem 0.5rem;
-
-    font-size: 1rem;
-
-    width: auto;
-  ;
-    border-radius: 0.25rem;
-    border-color: ;
-    border-style: solid;
-    border-width: 2px;
-    font-style: 'Lato','Helvetica Neue',Arial,Helvetica,sans-serif;
-    background-color: #2578C2;
-    color: #fff;
-  ",
-        "toString": [Function],
-      }
-    }
-  >
-    Click me!
-  </button>
-</Memo(Button)>
-`;
+exports[`Button component Should render default button correctly 1`] = `ReactWrapper {}`;