I want to write the test cases for this file - reactjs

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')
})

Answer 2

Generally, enzyme and the "shallow" (which does not execute effects) testing mindset are not really a thing any more nowadays. (Enzyme itself has been pretty much dropped by airbnb and is maintained by a single person at this point, often lagging behind on React by months).
I would want to encourage you to look into react-testing-library instead, which will also execute your effects (the fact that they are not executed means you are not testing them - that is what coverage tells you in the end).
Also, it shifts the whole "testing mindset" a lot towards "how would a user interact with this?", so it might make more sense for you to read through their tutorials than just providing a code example here.