Mini-Challenge 2: Intro to Testing

package.json

@@ -3,14 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.11.3",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^10.4.9",
     "@testing-library/user-event": "^12.1.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-icons": "^4.2.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "3.4.3",
+    "react-test-renderer": "^16.13.1",
+    "styled-components": "^5.2.1",
+    "styled-icons": "^10.29.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -21,6 +26,8 @@
     "lint:fix": "eslint ./src --ext .js,.jsx --fix"
   },
   "devDependencies": {
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
@@ -48,9 +55,7 @@
   },
   "lint-staged": {
     "*.{js, jsx, css, json}": [
-      "yarn run lint:fix",
-      "pretty-quick --staged",
-      "git add"
+      "pretty-quick --staged"
     ]
   },
   "husky": {

public/index.html

@@ -36,5 +36,8 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script>
+    if(!crossOriginIsolated) SharedArrayBuffer = ArrayBuffer;
+    </script>
   </body>
 </html>

src/__tests__/App.component.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import App from '../components/App';
+
+it('renders correctly', () => {
+  const tree = renderer.create(<App />).toJSON();
+  expect(tree).toMatchSnapshot();
+});

src/__tests__/Home.component.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { mount, render, configure } from 'enzyme';
+import Home from '../pages/Home';
+import VideoCard from '../components/VideoCard';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });
+
+it('renders correctly', () => {
+  const tree = renderer.create(<Home />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('check title by default', () => {
+  const title = mount(<Home />);
+  expect(title.find('h2').text()).toEqual('Mini Challenge 1');
+});
+
+it('renders VideoCard component', () => {
+  const wrapper = mount(<Home />);
+  expect(wrapper.containsMatchingElement(<VideoCard />)).toEqual(true);
+});

src/__tests__/VideoCard.component.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import VideoCard from '../components/VideoCard';
+
+it('renders correctly', () => {
+  const tree = renderer.create(<VideoCard />).toJSON();
+  expect(tree).toMatchSnapshot();
+});