测试 REDUX 连接组件 mapDISpatchToProps

Question

我只是需要一个关于如何测试 redux 连接组件的建议。在学习 Jest 和酶时遇到了困难。我不确定我是否做对了测试。各位大神可以就测试代码应用组件的正确方法提出建议吗？

主要是想测试一下在useEffect hooks中是否调用了dispatch。

还需要测试组件吗？

请看下面的代码：如果你能告诉我正确的测试这些组件，不胜感激。

import PropTypes from 'prop-types'
import React,{useEffect,useState} from "react"

import {Route, Redirect, Switch, BrowserRouter as Router } from "react-router-dom"
import { connect } from "react-redux"

// Import Routes all
import { userRoutes, authRoutes } from "./routes/allRoutes"

// Import all middleware
import Authmiddleware from "./routes/middleware/Authmiddleware"
import NewAuthmiddleware from "./routes/middleware/newAuthmiddleware"
// layouts Format
import VerticalLayout from "./components/VerticalLayout/"
import HorizontalLayout from "./components/HorizontalLayout/"
import NonAuthLayout from "./components/NonAuthLayout"
import Login from '../src/pages/Authentication/Login'
import Dashboard from "../src/pages/Dashboard/index"


// Import scss
import "./assets/scss/theme.scss"
import './assets/scss/globalstyling/style.scss'

import {validateToken} from './store/auth/login/actions'
import { Provider } from "react-redux"

// @import "~react-image-gallery/styles/scss/image-gallery.scss";


const App = props => {

  useEffect(()=>{
    const token = localStorage.getItem('auth-token')
    if(token){
      props.validateToken(localStorage.getItem('auth-token'))
    }
  },[props.loginData.isAuthenticated])
  

  function getLayout() {
    let layoutCls = VerticalLayout
    switch (props.layout.layoutType) {
      case "horizontal":
        layoutCls = HorizontalLayout
        break
      default:
        layoutCls = VerticalLayout
        break
    }
    return layoutCls
  }

  const Layout = getLayout()
  return (
    <React.Fragment>
      <Router>
        <Switch>
          {/* <Route exact path="/login" name="login" component={Login}></Route>
          <Route path="/" component={Dashboard}></Route> */}
          {authRoutes.map((route, idx) => (
            <Authmiddleware
              path={route.path}
              layout={NonAuthLayout}
              component={route.component}
              tokenValidated = {props.loginData.isAuthenticated}
              key={idx}
              isAuthProtected={false}
            />
          ))}
          {userRoutes.map((route, idx) => (
            <Authmiddleware
              path={route.path}
              layout={Layout}
              component={route.component}
              key={idx}
              tokenValidated = {props.loginData.isAuthenticated}
              isAuthProtected={true}
              exact
            />
          ))}
        </Switch>
      </Router>
    </React.Fragment>
  )
}

App.propTypes = {
  layout: PropTypes.any
}

const mapStateToProps = state => {

  const {loginData} = state.Login

  return {
    layout: state.Layout,
    loginData    
  }
  // const {tokenValidated} = state.Login
  // const {layout} = state.Layout
  // return {tokenValidated,layout}
}

export default connect(mapStateToProps, {validateToken})(App)

Answer 1

单元测试的理念是只测试你想测试的单元，在本例中是“App”组件。

所以 Redux 'connect' 函数逻辑不是这个组件的一部分。

所以你有两个选择：

1. 模拟“连接”功能，您可以在这里查看如何操作https://jestjs.io/docs/mock-functions)
2. 导出不带“连接”部分的“应用”组件。 Redux 数据最终会作为 props 传递，因此您可以在每个测试用例中传递不同的 props 值。

另一个建议是将选择器移动到不同的文件，您可以再次使用它：

// selectors from selectors.js file: 
export const layoutSelector = state =>  state.Layout;

export const loginDataSelector = state =>  state.Login.loginData;

// using selectors :

const mapStateToProps = state => {
  layoutSelector :layoutSelector 
  loginData : loginDataSelector 
}

Answer 2

我要做的简化它是当应用程序安装时，我希望在 localStorage 中有一个 auth-token

expect(window.localStorage.getItem('auth-token')).toBeTrue()