Add tests for Home, ListFilters, and MoviesList

Author: yocosaka

src/tests/components/Home.test.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { render } from '@testing-library/react';
+import renderer from 'react-test-renderer';
+import Home from '../../components/Home';
+import createTestStore from '../fixtures/createTestStore';
+
+describe('Home', () => {
+  let store;
+  beforeEach(() => {
+    store = createTestStore();
+  });
+
+  test('should render the initial message before users search a movie', async () => {
+    const { findByText } = render(
+      <Provider store={store}>
+        <Home />
+      </Provider>,
+    );
+    await findByText('Sorry, any movies have not been found. Try to search again!');
+  });
+
+  test('should match with snapshot', () => {
+    const jsx = (
+      <Provider store={store}>
+        <BrowserRouter>
+          <Home />
+        </BrowserRouter>
+      </Provider>
+    );
+    const tree = (() => renderer.create(jsx).toJSON());
+    expect(tree).toMatchSnapshot();
+  });
+});

src/tests/components/ListFilters.test.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { render } from '@testing-library/react';
+import renderer from 'react-test-renderer';
+import ListFilters from '../../components/ListFilters';
+import createTestStore from '../fixtures/createTestStore';
+
+describe('ListFilters', () => {
+  let store;
+  beforeEach(() => {
+    store = createTestStore();
+  });
+
+  test('should render the initial message before users search a movie', async () => {
+    const { findByText } = render(
+      <Provider store={store}>
+        <ListFilters />
+      </Provider>,
+    );
+    await findByText('2020-2021');
+  });
+
+  test('should match with snapshot', () => {
+    const jsx = (
+      <Provider store={store}>
+        <BrowserRouter>
+          <ListFilters />
+        </BrowserRouter>
+      </Provider>
+    );
+    const tree = (() => renderer.create(jsx).toJSON());
+    expect(tree).toMatchSnapshot();
+  });
+});

src/tests/components/MoviesList.test.js

@@ -5,7 +5,6 @@ import { render } from '@testing-library/react';
 import renderer from 'react-test-renderer';
 import MoviesList from '../../components/MoviesList';
 import createTestStore from '../fixtures/createTestStore';
-// import movieData from '../fixtures/movieData';
 
 describe('MoviesList', () => {
   let store;
@@ -23,15 +22,14 @@ describe('MoviesList', () => {
   });
 
   test('should match with snapshot', () => {
-    const tree = renderer
-      .create(
-        <Provider store={store}>
-          <BrowserRouter>
-            <MoviesList />
-          </BrowserRouter>
-        </Provider>,
-      )
-      .toJSON();
+    const jsx = (
+      <Provider store={store}>
+        <BrowserRouter>
+          <MoviesList />
+        </BrowserRouter>
+      </Provider>
+    );
+    const tree = (() => renderer.create(jsx).toJSON());
     expect(tree).toMatchSnapshot();
   });
 });

src/tests/components/__snapshots__/Home.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Home should match with snapshot 1`] = `[Function]`;

src/tests/components/__snapshots__/ListFilters.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ListFilters should match with snapshot 1`] = `[Function]`;

src/tests/components/__snapshots__/MoviesList.test.js.snap

@@ -1,14 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MoviesList should match with snapshot 1`] = `
-<div>
-  <p
-    className="error-msg"
-  >
-    Sorry, any movies have not been found. Try to search again!
-  </p>
-  <div
-    className="movies"
-  />
-</div>
-`;
+exports[`MoviesList should match with snapshot 1`] = `[Function]`;