I want to write the test cases for this file

Question

enter image description here

enter image description here

enter image description here

Here is my test code

import React from 'react';
import Notification from '../Notification';
import Enzyme, { shallow, mount, render } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import * as redux from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from '../../Core/Reducers/index';
import renderer from 'react-test-renderer';


const store = createStore(rootReducer, applyMiddleware(thunk));

Enzyme.configure({ adapter: new Adapter() });

describe('Should render initial layout Notification', () => {
  it('renders correctly', () => {
    const prop = true;
    const wrapper = shallow(<Provider store={store}><Notification {...prop} />
    </Provider>
        it('renders correctly', () => {
      const spy = jest.spyOn(redux, 'useSelector');
      spy.mockReturnValue('drafts');

    });

    it('renders correctly', () => {
      const setdraftState = jest.fn();
      jest
        .spyOn(React, 'useState')
        .mockImplementation(draftState => [draftState, setdraftState]);
    });
    it('renders correctly', () => {
      const setVenueState = jest.fn();
      jest
        .spyOn(React, 'useState')
        .mockImplementation(venueState => [venueState, setVenueState]);
    });
    it('renders correctly', () => {
      const setAuditState = jest.fn();
      jest
        .spyOn(React, 'useState')
        .mockImplementation(auditState => [auditState, setAuditState]);
    });
    it('renders correctly', () => {
      const setAdminState = jest.fn();
      jest
        .spyOn(React, 'useState')
        .mockImplementation(adminState => [adminState, setAdminState]);
    });
    it('renders correctly', () => {
      const setAdminStateOM = jest.fn();
      jest
        .spyOn(React, 'useState')
        .mockImplementation(adminStateOM => [adminStateOM, setAdminStateOM]);
    });
    it('renders correctly', () => {
      const setInternalVenueState = jest.fn();
      jest
        .spyOn(React, 'useState')
        .mockImplementation(internalVenueState => [internalVenueState, setInternalVenueState
        ]);
    });
    it('renders correctly', () => {
      const prop = true;
      const wrapper = shallow(<Provider store={store}><Notification  {...prop} />
      </Provider>); expect(wrapper.children().length).toEqual(1);
    });

    it('renders correctly', () => {
      const wrapper = shallow(<Provider store={store}><Notification /></Provider>);
      const openNotificationWithIcon = jest.fn();
      expect(wrapper.instance(openNotificationWithIcon));
    });

    it('Render Notification', () => {
      const notify = renderer.create(<Provider store={store}><Notification /></Provider>);
      let tree = notify.toJSON();
      expect(tree).toMatchSnapshot();
    });
  });

I write some test cases but it's giving me 33.36 test coverage few things as I showed you in the image want to cover I am new in jest and react I would appreciate If you assist me how can I cover all the test coverage

Answer 1

You need to test your all condition so your code coverage will be increased. So based on that you need to manage your API's response or your state value based on that you can cover that lines.

Example :

draftStatus you need to update status based on your condition and write test cases according to that.

Add, Delete, Failure etc...

You can use react-testing-library and react-hooks-testing-library for testing your react component and react hooks.

Basic Hooks Imagine we have a simple hook that we want to test:

import { useState, useCallback } from 'react'

export default function useCounter() {
  const [count, setCount] = useState(0)

  const increment = useCallback(() => setCount((x) => x + 1), [])
 
  return { count, increment }
}

To test useCounter we need to render it using the renderHook function provided by react-hooks-testing-library:

import { renderHook } from '@testing-library/react-hooks'
import useCounter from './useCounter'

test('should use counter', () => {
  const { result } = renderHook(() => useCounter())

  expect(result.current.count).toBe(0)
  expect(typeof result.current.increment).toBe('function')
})