diff --git a/src/packages/Avatar/__snapshots__/test.tsx.snap b/src/packages/Avatar/__snapshots__/test.tsx.snap
new file mode 100644
index 0000000..c3866c8
--- /dev/null
+++ b/src/packages/Avatar/__snapshots__/test.tsx.snap
@@ -0,0 +1,329 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` Should render Avatar with given children 1`] = `
+.c0 {
+ border-radius: 50%;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ font-size: 1.8rem;
+ width: 4rem;
+ height: 4rem;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ overflow: hidden;
+ position: relative;
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ color: #F8F7FB;
+ color: #EFF0F9;
+ background-image: linear-gradient( to right, currentColor 0%, #E6E6E6 20%, currentColor 40%, currentColor 100% );
+ background-size: 80rem 14rem;
+ -webkit-animation: placeholder 1s linear infinite forwards;
+ animation: placeholder 1s linear infinite forwards;
+ border-radius: 50%;
+}
+
+
+`;
+
+exports[` Should render Avatar with the different shape variants 1`] = `
+.c0 {
+ border-radius: 50%;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ font-size: 1.8rem;
+ width: 4rem;
+ height: 4rem;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ overflow: hidden;
+ position: relative;
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ color: #F8F7FB;
+ color: #EFF0F9;
+ background-image: linear-gradient( to right, currentColor 0%, #E6E6E6 20%, currentColor 40%, currentColor 100% );
+ background-size: 80rem 14rem;
+ -webkit-animation: placeholder 1s linear infinite forwards;
+ animation: placeholder 1s linear infinite forwards;
+ border-radius: 50%;
+}
+
+.c1 {
+ border-radius: 50%;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ font-size: 1.8rem;
+ width: 4rem;
+ height: 4rem;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ overflow: hidden;
+ position: relative;
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ color: #F8F7FB;
+ color: #EFF0F9;
+ background-image: linear-gradient( to right, currentColor 0%, #E6E6E6 20%, currentColor 40%, currentColor 100% );
+ background-size: 80rem 14rem;
+ -webkit-animation: placeholder 1s linear infinite forwards;
+ animation: placeholder 1s linear infinite forwards;
+ border-radius: 0;
+}
+
+.c2 {
+ border-radius: 50%;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ font-size: 1.8rem;
+ width: 4rem;
+ height: 4rem;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ overflow: hidden;
+ position: relative;
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ color: #F8F7FB;
+ color: #EFF0F9;
+ background-image: linear-gradient( to right, currentColor 0%, #E6E6E6 20%, currentColor 40%, currentColor 100% );
+ background-size: 80rem 14rem;
+ -webkit-animation: placeholder 1s linear infinite forwards;
+ animation: placeholder 1s linear infinite forwards;
+ border-radius: 0.4rem;
+}
+
+
+
+ Circle
+
+
+ Square
+
+
+ Rounded
+
+
+`;
+
+exports[` Should render Avatar with the different sizes 1`] = `
+.c0 {
+ border-radius: 50%;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ font-size: 1.8rem;
+ width: 2rem;
+ height: 2rem;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ overflow: hidden;
+ position: relative;
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ color: #F8F7FB;
+ color: #EFF0F9;
+ background-image: linear-gradient( to right, currentColor 0%, #E6E6E6 20%, currentColor 40%, currentColor 100% );
+ background-size: 80rem 14rem;
+ -webkit-animation: placeholder 1s linear infinite forwards;
+ animation: placeholder 1s linear infinite forwards;
+ border-radius: 50%;
+}
+
+.c1 {
+ border-radius: 50%;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ font-size: 1.8rem;
+ width: 3rem;
+ height: 3rem;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ overflow: hidden;
+ position: relative;
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ color: #F8F7FB;
+ color: #EFF0F9;
+ background-image: linear-gradient( to right, currentColor 0%, #E6E6E6 20%, currentColor 40%, currentColor 100% );
+ background-size: 80rem 14rem;
+ -webkit-animation: placeholder 1s linear infinite forwards;
+ animation: placeholder 1s linear infinite forwards;
+ border-radius: 50%;
+}
+
+.c2 {
+ border-radius: 50%;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ font-size: 1.8rem;
+ width: 4rem;
+ height: 4rem;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ overflow: hidden;
+ position: relative;
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ color: #F8F7FB;
+ color: #EFF0F9;
+ background-image: linear-gradient( to right, currentColor 0%, #E6E6E6 20%, currentColor 40%, currentColor 100% );
+ background-size: 80rem 14rem;
+ -webkit-animation: placeholder 1s linear infinite forwards;
+ animation: placeholder 1s linear infinite forwards;
+ border-radius: 50%;
+}
+
+.c3 {
+ border-radius: 50%;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ font-size: 1.8rem;
+ width: 6rem;
+ height: 6rem;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ overflow: hidden;
+ position: relative;
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ color: #F8F7FB;
+ color: #EFF0F9;
+ background-image: linear-gradient( to right, currentColor 0%, #E6E6E6 20%, currentColor 40%, currentColor 100% );
+ background-size: 80rem 14rem;
+ -webkit-animation: placeholder 1s linear infinite forwards;
+ animation: placeholder 1s linear infinite forwards;
+ border-radius: 50%;
+}
+
+
+
+ XS
+
+
+ S
+
+
+ M
+
+
+ L
+
+
+`;
+
+exports[` Should render Avatar with the given image 1`] = `
+.c0 {
+ border-radius: 50%;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ font-size: 1.8rem;
+ width: 4rem;
+ height: 4rem;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ overflow: hidden;
+ position: relative;
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ color: #F8F7FB;
+ color: #EFF0F9;
+ background-image: linear-gradient( to right, currentColor 0%, #E6E6E6 20%, currentColor 40%, currentColor 100% );
+ background-size: 80rem 14rem;
+ -webkit-animation: placeholder 1s linear infinite forwards;
+ animation: placeholder 1s linear infinite forwards;
+ border-radius: 50%;
+}
+
+.c1 {
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ object-fit: cover;
+}
+
+
+
+
+
+
+`;
diff --git a/src/packages/Avatar/test.tsx b/src/packages/Avatar/test.tsx
new file mode 100644
index 0000000..653f54b
--- /dev/null
+++ b/src/packages/Avatar/test.tsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import { render } from '../../utils/testUtils'
+
+import Avatar from '.'
+
+describe('', () => {
+ it('Should render Avatar with given children', () => {
+ const { container } = render(John)
+ expect(container).toMatchSnapshot()
+ })
+
+ it('Should render Avatar with the given image', () => {
+ const { container } = render(
+
+ John
+
+ )
+ expect(container).toMatchSnapshot()
+ })
+
+ it('Should render Avatar with the different sizes', () => {
+ const { container } = render(
+ <>
+ XS
+ S
+ M
+ L
+ >
+ )
+ expect(container).toMatchSnapshot()
+ })
+
+ it('Should render Avatar with the different shape variants', () => {
+ const { container } = render(
+ <>
+ Circle
+ Square
+ Rounded
+ >
+ )
+ expect(container).toMatchSnapshot()
+ })
+ it('should render Avatar by handling custom props correctly', () => {
+ const { getByTestId } = render(
+
+ John
+
+ )
+ const avatar = getByTestId('custom-avatar')
+ expect(avatar).toHaveAttribute('title', 'Custom Title')
+ })
+})