reactjs 操作必须是普通对象,实际类型为:'函数'

aamkag61  于 2022-12-18  发布在  React
关注(0)|答案(1)|浏览(105)

我一直在为我的 Jmeter 板模块编写测试用例,但它在此测试用例文件中显示错误,但前端工作正常:这是密码:操作必须是普通对象。实际类型为:'function'。您可能需要在存储设置中添加中间件来处理其他值的调度,例如'redux-thunk'来处理函数的调度。

const Dashboard = () => {
  const dispatch = useDispatch();
  const { employees } = useSelector((state) => state.employees);
  const { results } = useSelector((state) => state.results);
  const [currentId, setCurrentId] = useState(1);
  const [succesEmplo, setSuccessEmplo] = useState([]);
  useEffect(() => {
    dispatch(getTotalEmployees(""));
    dispatch(getTotalRes());
  }, [currentId]);
  const [sidebar, setSidebar] = useState(false);

  useEffect(() => {
    var successEmp = [];
    for (var i = 0; i < employees.length; i++) {
      for (var j = 0; j < results.length; j++) {
        if (
          employees[i]._id === results[j].empId &&
          !successEmp.includes(employees[i])
        ) {
          successEmp.push(employees[i]);
        }
      }
    }
    setSuccessEmplo(successEmp);
  }, [employees, results]);
  const showSidebar = () => {
    setSidebar(!sidebar);
  };

这是我的总电磁脉冲函数

export const getTotalEmployees = (category) => async (dispatch) => {
  try {
    const { data } = await api.fetchTotalEmployees(category);
    dispatch({ type: FETCH_TOTAL, payload: data });
  } catch (error) {
    console.log(error);
  }
};

和gettotalres函数:

export const getTotalRes = () => async (dispatch) => {
  try {
    const { data } = await api.fetchTotalRes();
    dispatch({ type: FETCH_TOTAL_RES, payload: data });
  } catch (error) {
    console.log(error);
  }
};


测试用例代码:从“React”导入React;

import { render, fireEvent, waitForElement } from '@testing-library/react';
import Dashboard from '../Pages/dashboard/Dashboard';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { Router } from 'react-router-dom';
import {createMemoryHistory} from 'history';
const setup = () => {
  const store = createStore(() => ({
    employees: {
      employees: [
        {
          _id: '1',
          username: 'Employee 1',
          createdAt: new Date().toJSON(),
        },
        {
          _id: '2',
          username: 'Employee 2',
          createdAt: '2022-12-12T00:00:00.000Z',
        },
      ],
    },
    results: {
      results: [
        {
          empId: '1',
          result: 'pass',
        },
      ],
    },
  }));
  const history = createMemoryHistory();
  const utils = render(
    
    <Provider store={store}>
      <Router location={history.location} navigator={history}>
      <Dashboard />
      </Router>
    </Provider>
  );

  return {
    ...utils,
    store,
  };
};

test('/useEffect is called on mount and when currentId changes', () => {
  const useEffect = jest.spyOn(React, 'useEffect');
  setup();
  expect(useEffect).toHaveBeenCalledTimes(2);
  React.useEffect.mockRestore();
});

test('getTotalEmployees and getTotalRes actions are dispatched', () => {
  const { store } = setup();
  expect(store.getActions()).toEqual([
    { type: 'GET_TOTAL_EMPLOYEES', payload: '' },
    { type: 'GET_TOTAL_RES' },
  ]);
});
ia2d9nvy

ia2d9nvy1#

您不应该测试useEffect是否被调用。您需要测试useEffect中发生了什么。您有两个选项:

  • 模拟分派并检查调用它时使用了正确的参数。
  • 测试副作用(如果有的话)。例如,调用dispatch(getTotalEmployees)是否会更改组件中的任何内容?如果是,则可以检查所发生的任何影响是否符合您的预期

相关问题