如何在useEffect react hook中编写用于URL推送的测试用例？ [英] How to write test case for url push in useEffect react hook?

问题描述

 从../../actions/user.actions'导入{注销}； 
 
 const注销=（）=> {
 useEffect（（）=> {
 Router.push（’/ any’）; 
}，[]）; 
}; 
  

测试文件

  afterEach（（）= >> {
 jest.clearAllMocks（）; 
}）; 
 
 afterAll（（）=> {
 jest.resetAllMocks（）; //清除所有模拟。
}）; 
 
 it（'应该检查路线'，（）=> {
 const wrapper = mount（< Logout />）; 
 Expect（wrapper.find（ 'LoadingMessage'））。toBeTruthy（）; 
 Expect（useDispatch）.toBeCalledTimes（1）; 
 const mDispatch = useDispatch（）; 
 Expect（mDispatch）.toBeCalledWith（{type：' USER_LOGOUT'}）; 
 Expect（mDispatch）.toBeCalledWith（'/'）; expect（mDispatch）.toBeCalledWith（{type：'USER_LOGOUT'}）; '/'）; 
}）
}）
  

这是我的示例我编写的代码，我想为此编写一个测试用例。这样我就可以测试路由器是否在进行推送？

想要一些想法或帮助。

感谢

解决方案

在单元测试解决方案下面模拟 useDispatch 钩子和 next / router 模块，而无需使用模拟redux存储。使用模拟的redux存储并在分派操作后检查存储的状态更接近集成测试。

例如

index.jsx ：

 从'react'导入React，{useEffect};从下一个/路由器导入
路由器；来自 react-redux的
 import {useDispatch}； 
从 ./user.actions导入{注销}; 
从 ./LoadingMessage导入{LoadingMessage}; 
 
 export const注销=（）=> {
 const dispatch = useDispatch（）; 
 const props = {
 active：true，
 withOverlay：false，
 small：false，
}; 
 useEffect（（）=> {
 dispatch（logout（））; 
 Router.push（’/’）; 
}，[]）; 
 return（
< div> 
< LoadingMessage {... props}> 
< div>登出，请稍候...< / div> 
< / LoadingMessage> 
< / div> 
）; 
}; 
  

user.actions.ts ：

 导出函数logout（）{
 return {
 type：'LOGOUT' ，
}； 
} 
  

LoadingMessage.jsx

  export const LoadingMessage =（{children}）=> < div> {children}< / div> ;; 
  

index.test.jsx ：

  import {注销}从'./';来自 react-redux的
 import {useDispatch}； 
从酶导入{mount}；从下一个/路由器导入
路由器； 
 
 jest.mock（‘next / router’，（）=>（{push：jest.fn（）}），{virtual：true}）; 
 
 jest.mock（'react-redux'，（）= >> {
 const originalReactRedux = jest.requireActual（'react-redux'）; 
 const mDispatch = jest .fn（）; 
 const mUseDispatch = jest.fn（（）=> mDispatch）; 
 return {
 ... originalReactRedux，
 useDispatch：mUseDispatch，
}; 
}）； 
 
 describe（'61928263'，（）=> {
 afterEach（（）=> {
 jest.clearAllMocks（）; 
}）; 
 afterAll（（）=> {
 jest.resetAllMocks（）; 
}）; 
 it（'不使用模拟存储就应该通过'，（）=> {
 const wrapper = mount（< Logout>< / Logout>）; 
 Expect（wrapper.find（'LoadingMessage'））。toBeTruthy（）; 
 Expect（useDispatch）.toBeCalledTimes（ 1）; 
 const mDispatch = useDispatch（）; //获得模拟的调度函数
 Expect（mDispatch）.toBeCalledWith（{type：'LOGOUT'}）; 
 Expect（Router.push ）.toBeCalledWith（'/'）; 
}）; 
}）; 
  

测试结果：

<上课前= lang-sh prettyprint-override> PASS stackoverflow / 61928263 / index.test.jsx（8.62s）
61928263
✓应该在不使用模拟存储的情况下通过（37ms）

-------------------- | --------- | ---------- |- -------- | --------- | -------------------
文件| ％stmts | ％分支|功能百分比| ％行|未发现的行号
-------------------- | --------- || ---------- | --------- | --------- | -------------------
所有文件| 100 | 100 | 100 | 100 |
LoadingMessage.jsx | 100 | 100 | 100 | 100 |
index.jsx | 100 | 100 | 100 | 100 |
user.actions.ts | 100 | 100 | 100 | 100 |
-------------------- | --------- | ---------- | ---- ----- | --------- || -------------------
测试套件：1个通过，总共1个
测试：1个通过，总共1个
快照：0个总计
时间：9.601s


import { logout } from '../../actions/user.actions';

const Logout = () => {
      useEffect(() => {
        Router.push('/any');
      }, []);
    };

Test File

     afterEach(() => {
        jest.clearAllMocks(); 
      });

      afterAll(() => {
        jest.resetAllMocks(); // clear all the mocks.
      });

      it('Should check the route', () => {
        const wrapper = mount(<Logout />);
        expect(wrapper.find('LoadingMessage')).toBeTruthy();
        expect(useDispatch).toBeCalledTimes(1);
        const mDispatch = useDispatch();
expect(mDispatch).toBeCalledWith({ type: 'USER_LOGOUT' });
    expect(Router.push).toBeCalledWith('/');expect(mDispatch).toBeCalledWith({ type: 'USER_LOGOUT' });
    expect(mDispatch).toBeCalledWith('/');
     })
    })

This is my sample of code that I have written, I want to write a test case for this. So I can test the Router push is happening or not?

Wanting some idea or help.

Thanks in advance.

解决方案

Below unit test solution mocks useDispatch hook and next/router module without using a mock redux store. Using the mocked redux store and check the state of store after dispatching an action is closer to integration testing.

E.g.

index.jsx:

import React, { useEffect } from 'react';
import Router from 'next/router';
import { useDispatch } from 'react-redux';
import { logout } from './user.actions';
import { LoadingMessage } from './LoadingMessage';

export const Logout = () => {
  const dispatch = useDispatch();
  const props = {
    active: true,
    withOverlay: false,
    small: false,
  };
  useEffect(() => {
    dispatch(logout());
    Router.push('/');
  }, []);
  return (
    <div>
      <LoadingMessage {...props}>
        <div>Logging out, please wait...</div>
      </LoadingMessage>
    </div>
  );
};

user.actions.ts:

export function logout() {
  return {
    type: 'LOGOUT',
  };
}

LoadingMessage.jsx

export const LoadingMessage = ({ children }) => <div>{children}</div>;

index.test.jsx:

import { Logout } from './';
import { useDispatch } from 'react-redux';
import { mount } from 'enzyme';
import Router from 'next/router';

jest.mock('next/router', () => ({ push: jest.fn() }), { virtual: true });

jest.mock('react-redux', () => {
  const originalReactRedux = jest.requireActual('react-redux');
  const mDispatch = jest.fn();
  const mUseDispatch = jest.fn(() => mDispatch);
  return {
    ...originalReactRedux,
    useDispatch: mUseDispatch,
  };
});

describe('61928263', () => {
  afterEach(() => {
    jest.clearAllMocks();
  });
  afterAll(() => {
    jest.resetAllMocks();
  });
  it('should pass without using mock store', () => {
    const wrapper = mount(<Logout></Logout>);
    expect(wrapper.find('LoadingMessage')).toBeTruthy();
    expect(useDispatch).toBeCalledTimes(1);
    const mDispatch = useDispatch(); // get the mocked dispatch function
    expect(mDispatch).toBeCalledWith({ type: 'LOGOUT' });
    expect(Router.push).toBeCalledWith('/');
  });
});

The outcome for the test:

 PASS  stackoverflow/61928263/index.test.jsx (8.62s)
  61928263
    ✓ should pass without using mock store (37ms)

--------------------|---------|----------|---------|---------|-------------------
File                | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
--------------------|---------|----------|---------|---------|-------------------
All files           |     100 |      100 |     100 |     100 |                   
 LoadingMessage.jsx |     100 |      100 |     100 |     100 |                   
 index.jsx          |     100 |      100 |     100 |     100 |                   
 user.actions.ts    |     100 |      100 |     100 |     100 |                   
--------------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        9.601s

这篇关于如何在useEffect react hook中编写用于URL推送的测试用例？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！