diff --git a/jest.config.js b/jest.config.js
index 02b831b..9cce56d 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -18,5 +18,8 @@ module.exports = {
   },
   testEnvironment: "node",
   testMatch: ["**/__tests__/*.js"],
-  testPathIgnorePatterns: ["/node_modules/", ".eslintrc.js"]
+  testPathIgnorePatterns: ["/node_modules/", ".eslintrc.js"],
+  transformIgnorePatterns: [
+    "/node_modules/(?!magic-script-components).+(js|jsx)$"
+ ]
 };
diff --git a/package.json b/package.json
index a69d143..64bfeeb 100644
--- a/package.json
+++ b/package.json
@@ -32,15 +32,17 @@
   },
   "peerDependencies": {
     "@babel/core": "^7.6.0",
-    "@babel/plugin-transform-react-jsx": "^7.3.0",
     "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-transform-react-jsx": "^7.3.0",
     "rollup-plugin-babel": "^4.3.3"
   },
   "devDependencies": {
+    "@babel/core": "^7.6.0",
     "@babel/preset-env": "^7.6.0",
     "@babel/preset-react": "^7.0.0",
     "babel-jest": "^24.9.0",
     "jest": "^24.9.0",
+    "magic-script-components": "2.0.0",
     "react-test-renderer": "^16.9.0"
   }
 }
diff --git a/src/__tests__/Audio.spec.js b/src/__tests__/Audio.spec.js
index d0398a1..656bd68 100644
--- a/src/__tests__/Audio.spec.js
+++ b/src/__tests__/Audio.spec.js
@@ -1,11 +1,11 @@
 //
 import React from "react";
 import { create } from "react-test-renderer";
+import { Audio } from "magic-script-components";
 
 describe("Audio component", () => {
   test("Matches the snapshot", () => {
-    const props = {fileName: "test_file.avi"};
-    const audio = create(React.createElement("audio", props));
+    const audio = create(<Audio fileName="test_file.avi" />);
     expect(audio.toJSON()).toMatchSnapshot();
   });
 });
diff --git a/src/__tests__/Button.spec.js b/src/__tests__/Button.spec.js
index 9c782dd..2550204 100644
--- a/src/__tests__/Button.spec.js
+++ b/src/__tests__/Button.spec.js
@@ -1,11 +1,11 @@
 //
 import React from "react";
 import { create } from "react-test-renderer";
+import { Button } from "magic-script-components";
 
 describe("Button component", () => {
   test("Matches the snapshot", () => {
-    const props = {text: "Test Button", width: 0.25, height: 0.1}
-    const button = create(React.createElement("button", props));
+    const button = create(<Button text="Test Button" width={0.25} height={0.1} />);
     expect(button.toJSON()).toMatchSnapshot();
   });
 });
diff --git a/src/__tests__/CircleConfirmation.spec.js b/src/__tests__/CircleConfirmation.spec.js
index db42495..df80f02 100644
--- a/src/__tests__/CircleConfirmation.spec.js
+++ b/src/__tests__/CircleConfirmation.spec.js
@@ -1,10 +1,11 @@
 //
 import React from "react";
 import { create } from "react-test-renderer";
+import { CircleConfirmation } from "magic-script-components";
 
 describe("CircleConfirmation component", () => {
   test("Matches the snapshot", () => {
-    const circleConfirmation = create(React.createElement("circleConfirmation"));
+    const circleConfirmation = create(<CircleConfirmation />);
     expect(circleConfirmation.toJSON()).toMatchSnapshot();
   });
 });
diff --git a/src/__tests__/ColorPicker.spec.js b/src/__tests__/ColorPicker.spec.js
index f38f3c9..2fcf1b4 100644
--- a/src/__tests__/ColorPicker.spec.js
+++ b/src/__tests__/ColorPicker.spec.js
@@ -1,10 +1,11 @@
 //
 import React from "react";
 import { create } from "react-test-renderer";
+import { ColorPicker } from "magic-script-components";
 
 describe("ColorPicker component", () => {
   test("Matches the snapshot", () => {
-    const colorPicker = create(React.createElement("colorPicker"));
+    const colorPicker = create(<ColorPicker />);
     expect(colorPicker.toJSON()).toMatchSnapshot();
   });
 });
diff --git a/src/__tests__/DatePicker.spec.js b/src/__tests__/DatePicker.spec.js
index 73a25af..f30dc01 100644
--- a/src/__tests__/DatePicker.spec.js
+++ b/src/__tests__/DatePicker.spec.js
@@ -1,11 +1,11 @@
 //
 import React from "react";
 import { create } from "react-test-renderer";
+import { DatePicker } from "magic-script-components";
 
 describe("DatePicker component", () => {
   test("Matches the snapshot", () => {
-    const props = {label: "Test DatePicker"}
-    const datepicker = create(React.createElement("datePicker", props));
-    expect(datepicker.toJSON()).toMatchSnapshot();
+    const datePicker = create(<DatePicker label="Test DatePicker" />);
+    expect(datePicker.toJSON()).toMatchSnapshot();
   });
 });
diff --git a/src/__tests__/Image.spec.js b/src/__tests__/Image.spec.js
index e3e0d49..1ebba9b 100644
--- a/src/__tests__/Image.spec.js
+++ b/src/__tests__/Image.spec.js
@@ -1,11 +1,11 @@
 //
 import React from "react";
 import { create } from "react-test-renderer";
+import { Image } from "magic-script-components";
 
 describe("Image component", () => {
   test("Matches the snapshot", () => {
-    const props = {filePath: "test_file.png", width: 0.2, height: 0.2}
-    const image = create(React.createElement("image", props));
+    const image = create(<Image filePath="test_file.png" width={0.2} height={0.2} />);
     expect(image.toJSON()).toMatchSnapshot();
   });
 });
diff --git a/src/__tests__/ListView.spec.js b/src/__tests__/ListView.spec.js
index 55ae559..4021f86 100644
--- a/src/__tests__/ListView.spec.js
+++ b/src/__tests__/ListView.spec.js
@@ -1,10 +1,11 @@
 //
 import React from "react";
 import { create } from "react-test-renderer";
+import { ListView } from "magic-script-components";
 
 describe("ListView component", () => {
   test("Matches the snapshot", () => {
-    const listView = create(React.createElement("listView"));
+    const listView = create(<ListView />);
     expect(listView.toJSON()).toMatchSnapshot();
   });
 });
diff --git a/src/__tests__/ListViewItem.spec.js b/src/__tests__/ListViewItem.spec.js
index 07cd80d..a991997 100644
--- a/src/__tests__/ListViewItem.spec.js
+++ b/src/__tests__/ListViewItem.spec.js
@@ -1,10 +1,11 @@
 //
 import React from "react";
 import { create } from "react-test-renderer";
+import { ListViewItem } from "magic-script-components";
 
 describe("ListViewItem component", () => {
   test("Matches the snapshot", () => {
-    const listViewItem = create(React.createElement("listViewItem"));
+    const listViewItem = create(<ListViewItem />);
     expect(listViewItem.toJSON()).toMatchSnapshot();
   });
 });
diff --git a/src/__tests__/Model.spec.js b/src/__tests__/Model.spec.js
index 8a2b0c5..d9bd4be 100644
--- a/src/__tests__/Model.spec.js
+++ b/src/__tests__/Model.spec.js
@@ -1,11 +1,11 @@
 //
 import React from "react";
 import { create } from "react-test-renderer";
+import { Model } from "magic-script-components";
 
 describe("Model component", () => {
   test("Matches the snapshot", () => {
-    const props = {modelPath:"", materialPath:"", texturePath:"", textureName:""}
-    const model = create(React.createElement("model", props));
+    const model = create(<Model modelPath="" materialPath="" texturePath="" textureName="" />);
     expect(model.toJSON()).toMatchSnapshot();
   });
 });
diff --git a/src/__tests__/PageView.spec.js b/src/__tests__/PageView.spec.js
index 8506347..cfce467 100644
--- a/src/__tests__/PageView.spec.js
+++ b/src/__tests__/PageView.spec.js
@@ -1,11 +1,11 @@
 //
 import React from "react";
 import { create } from "react-test-renderer";
+import { PageView } from "magic-script-components";
 
 describe("PageView component", () => {
   test("Matches the snapshot", () => {
-    const props = {width: 0.2, height: 0.2}
-    const pageView = create(React.createElement("pageView", props));
+    const pageView = create(<PageView width={0.2} height={0.2} />);
     expect(pageView.toJSON()).toMatchSnapshot();
   });
 });
diff --git a/src/__tests__/ScrollBar.spec.js b/src/__tests__/ScrollBar.spec.js
index a2316c6..29d0b1e 100644
--- a/src/__tests__/ScrollBar.spec.js
+++ b/src/__tests__/ScrollBar.spec.js
@@ -1,11 +1,11 @@
 //
 import React from "react";
 import { create } from "react-test-renderer";
+import { ScrollBar } from "magic-script-components";
 
 describe("ScrollBar component", () => {
   test("Matches the snapshot", () => {
-    const props = {width: 0.1}
-    const scrollbar = create(React.createElement("scrollBar", props));
+    const scrollbar = create(<ScrollBar width={0.1} />);
     expect(scrollbar.toJSON()).toMatchSnapshot();
   });
 });
diff --git a/src/__tests__/Text.spec.js b/src/__tests__/Text.spec.js
index b3d7a7d..9b23fce 100644
--- a/src/__tests__/Text.spec.js
+++ b/src/__tests__/Text.spec.js
@@ -1,11 +1,11 @@
 //
 import React from "react";
 import { create } from "react-test-renderer";
+import { Text } from "magic-script-components";
 
 describe("Text component", () => {
   test("Matches the snapshot", () => {
-    const props = {text: "Test Text"}
-    const text = create(React.createElement("text", props));
+    const text = create(<Text text="Test Text" />);
     expect(text.toJSON()).toMatchSnapshot();
   });
 });
diff --git a/src/__tests__/TextEdit.spec.js b/src/__tests__/TextEdit.spec.js
index f04b860..8ea9d77 100644
--- a/src/__tests__/TextEdit.spec.js
+++ b/src/__tests__/TextEdit.spec.js
@@ -1,11 +1,11 @@
 //
 import React from "react";
 import { create } from "react-test-renderer";
+import { TextEdit } from "magic-script-components";
 
 describe("TextEdit component", () => {
   test("Matches the snapshot", () => {
-    const props = {text: "Test Text Edit", width: 0.25, height: 0.1}
-    const text = create(React.createElement("textEdit", props));
+    const text = create(<TextEdit text="Test Text Edit" width={0.25} height={0.1} />);
     expect(text.toJSON()).toMatchSnapshot();
   });
 });
diff --git a/src/__tests__/TimePicker.spec.js b/src/__tests__/TimePicker.spec.js
index 2b3b47a..efeaf9a 100644
--- a/src/__tests__/TimePicker.spec.js
+++ b/src/__tests__/TimePicker.spec.js
@@ -1,11 +1,11 @@
 //
 import React from "react";
 import { create } from "react-test-renderer";
+import { TimePicker } from "magic-script-components";
 
 describe("TimePicker component", () => {
   test("Matches the snapshot", () => {
-    const props = {label: "Test TimePicker"}
-    const timePicker = create(React.createElement("timePicker", props));
+    const timePicker = create(<TimePicker label="Test TimePicker" />);
     expect(timePicker.toJSON()).toMatchSnapshot();
   });
 });
diff --git a/src/__tests__/Video.spec.js b/src/__tests__/Video.spec.js
index 78a050d..7cede22 100644
--- a/src/__tests__/Video.spec.js
+++ b/src/__tests__/Video.spec.js
@@ -1,11 +1,11 @@
 //
 import React from "react";
 import { create } from "react-test-renderer";
+import { Video } from "magic-script-components";
 
 describe("Video component", () => {
   test("Matches the snapshot", () => {
-    const props = {videoPath: "test_file.mp4"}
-    const video = create(React.createElement("video", props));
+    const video = create(<Video videoPath="test_file.mp4" />);
     expect(video.toJSON()).toMatchSnapshot();
   });
 });