我想为这个文件写测试用例

Question

enter image description here

这是我的测试代码

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();
    });
  });

我写了一些测试用例，但它给了我 33.36 的测试覆盖率，正如我在图片中向您展示的，我想覆盖一些东西我是开玩笑的新手，我会很感激如果你能帮助我，我该如何覆盖所有测试覆盖范围

Answer 1

您需要测试您的所有条件，以便增加您的代码覆盖率。因此，基于此，您需要管理您的 API 的响应或您的状态值，您可以覆盖这些行。

示例：

draftStatus你需要根据你的情况更新状态，并据此编写测试用例。

Add, Delete, Failure etc...

您可以使用 react-testing-library and react-hooks-testing-library 用于测试您的反应组件和反应挂钩。

基本钩子 假设我们有一个要测试的简单钩子：

import { useState, useCallback } from 'react'

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

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

为了测试 useCounter，我们需要使用 react-hooks-testing-library 提供的 renderHook 函数来渲染它：

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

一般来说，enzyme 和“肤浅”（不执行效果）测试心态如今已不再是真正的问题。（Enzyme 本身已经被 airbnb 放弃了，目前由一个人维护，通常比 React 落后几个月）。

我想鼓励你改为查看 react-testing-library，它也会执行你的效果（它们没有被执行的事实意味着你没有测试它们 - 这就是覆盖率告诉你的结尾）。此外，它将整个“测试心态”转变为“用户将如何与之交互？”，因此阅读他们的教程可能比仅在此处提供代码示例更有意义。

我想为这个文件写测试用例

I want to write the test cases for this file

reactjs

jestjs

redux

enzyme