Update for unit testing

- jestjs/jest#3126
- https://stackoverflow.com/questions/60876624/how-to-test-mock-out-react-hooks

Author: wize-hieunguyen

jest.setup.js

@@ -1,4 +1,5 @@
 import { configure } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
+import 'babel-polyfill';
 
 configure({ adapter: new Adapter() })

package.json

@@ -8,6 +8,7 @@
     "@material-ui/icons": "^4.9.1",
     "@okta/okta-react": "^3.0.1",
     "axios": "^0.19.2",
+    "babel-polyfill": "^6.26.0",
     "css-loader": "^3.5.3",
     "dotenv": "^8.2.0",
     "file-loader": "^6.0.0",

src/App.js

@@ -5,7 +5,6 @@ import { Container } from 'semantic-ui-react'
 import config from './config'
 import Navbar from './views/Navbar'
 import Home from './views/Home'
-import Profile from './views/Profile'
 
 const App = () => (
   <Router>
@@ -14,7 +13,6 @@ const App = () => (
       <Container text style={{ marginTop: '7em' }}>
         <Route path="/" exact component={Home} />
         <Route path="/implicit/callback" component={LoginCallback} />
-        <SecureRoute path="/profile" component={Profile} />
       </Container>
     </Security>
   </Router>

src/App.test.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import App from './App'
+
+describe('App component', () => {
+  const component = shallow(<App />)
+
+  it('renders without crashing', () => {
+    expect(component.length).toBe(1)
+  })
+})

src/__tests__/App.test.js

@@ -32,11 +32,13 @@ const Dashboard = () => {
       {authState.isAuthenticated && userInfo && (
         <div>
           <p>
-            Logged in, Welcome back, 
+            Logged in, Welcome back,
             {userInfo.name}
           </p>
           <p>
-            <a href="/profile">My Profile</a>
+            Token:
+            <br />
+            {authState.accessToken}
           </p>
         </div>
       )}

src/__tests__/__snapshots__/App.test.js.snap

@@ -0,0 +1,20 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import Home from './Home'
+
+jest.mock('@okta/okta-react', () => ({
+  useOktaAuth: () => {
+    return {
+      authState: {},
+      authService: {}
+    }
+  }
+}))
+
+describe('Home component', () => {
+  const component = shallow(<Home />)
+
+  it('renders without crashing', () => {
+    expect(component.length).toBe(1)
+  })
+})

src/views/Home.js

@@ -15,11 +15,6 @@ const Navbar = () => {
           <Menu.Item as="a" header href="/">
             GitWize
           </Menu.Item>
-          {authState.isAuthenticated && (
-            <Menu.Item id="profile-button" as="a" href="/profile">
-              Profile
-            </Menu.Item>
-          )}
           {authState.isAuthenticated && (
             <Menu.Item id="logout-button" as="a" onClick={logout}>
               Logout

src/views/Home.test.js

@@ -16,7 +16,7 @@ module.exports = {
         exclude: /node_modules/,
         loader: 'babel-loader'
       },
-      { test: /\.css$/, loader: "style-loader!css-loader" },
+      { test: /\.css$/, loader: 'style-loader!css-loader' },
       {
         test: /\.(jpg|png|gif|jpeg|woff|woff2|eot|ttf|svg)$/,
         loader: 'url-loader?limit=100000'
@@ -29,8 +29,9 @@ module.exports = {
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
     new webpack.DefinePlugin({
-    'process.env': JSON.stringify(dotenv.config().parsed)
-  })],
+      'process.env': JSON.stringify(dotenv.config().parsed)
+    })
+  ],
   devtool: 'cheap-module-eval-source-map',
   devServer: {
     contentBase: path.join(__dirname, 'public'),