Testing

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.vercel

coverage.txt

@@ -0,0 +1,11 @@
+yarn run v1.22.10
+$ react-scripts test --coverage
+No tests found related to files changed since last commit.
+----------|----------|----------|----------|----------|-------------------|
+File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
+----------|----------|----------|----------|----------|-------------------|
+All files |        0 |        0 |        0 |        0 |                   |
+----------|----------|----------|----------|----------|-------------------|
+
+
+Done in 7.95s.

package.json

@@ -6,6 +6,8 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^10.4.9",
     "@testing-library/user-event": "^12.1.3",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router": "^5.2.0",

src/components/Layout/Header/Header.test.js

@@ -0,0 +1,12 @@
+/* eslint-disable react/jsx-filename-extension */
+import React from 'react';
+import { shallow } from 'enzyme';
+import Header from './Header';
+
+describe('Header', () => {
+  it('should render Header component correctly', () => {
+    const wrapper = shallow(<Header />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/components/Layout/Header/__snapshots__/Header.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header should render Header component correctly 1`] = `ShallowWrapper {}`;

src/components/Layout/Layout.test.js

@@ -0,0 +1,12 @@
+/* eslint-disable react/jsx-filename-extension */
+import React from 'react';
+import { shallow } from 'enzyme';
+import Layout from './Layout.component';
+
+describe('Layout', () => {
+  it('should render Layout component correctly', () => {
+    const wrapper = shallow(<Layout />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Layout should render Layout component correctly 1`] = `ShallowWrapper {}`;

src/pages/Home/Home.test.js

@@ -0,0 +1,23 @@
+/* eslint-disable react/jsx-filename-extension */
+import React from 'react';
+import { shallow } from 'enzyme';
+import HomePage from './Home.page';
+
+import mockData from './youtube-videos-mock.json';
+import { VideoCard } from './Home.styled';
+
+describe('HomePage', () => {
+  it('should render HomePage component correctly', () => {
+    const wrapper = shallow(<HomePage />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render same quantity of items as mockData', () => {
+    const wrapper = shallow(<HomePage />);
+    const countMockItems = mockData.items.filter(
+      (item) => item.id.kind === 'youtube#video'
+    ).length;
+    expect(wrapper.find(VideoCard).length).toBe(countMockItems);
+  });
+});

src/pages/Home/__snapshots__/Home.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HomePage should render HomePage component correctly 1`] = `ShallowWrapper {}`;

src/setupTests.js

@@ -3,3 +3,8 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom/extend-expect';
+
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });