javascript - React Testing Library with Redux - 在动作创建者中模拟 Axios

Question

我有一个应用程序，我正在添加集成测试来学习 React 测试库。它内置在 MERN 堆栈中，以及用于状态管理的 Redux。

我的测试包装器是标准设置：

import React from 'react';
import { render as rtlRender } from '@testing-library/react';
import { createStore, applyMiddleware, compose } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';

const render = (
  ui,
  {
    initialState,
    store = createStore(rootReducer, compose(applyMiddleware(thunk))),
    ...renderOptions
  } = {}
) => {
  const Wrapper = ({ children }) => {
    return <Provider store={store}>{children}</Provider>;
  };
  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
};

export * from '@testing-library/react';

export { render };

目前，我正在尝试测试登录表单和字段无效时返回的错误。

import React from 'react';
import { Router } from 'react-router';
import '@testing-library/jest-dom';
import { createMemoryHistory } from 'history';
import { render, screen, fireEvent, waitFor } from '../../../utils/test-utils';
import Login from '../login';

jest.mock('axios', () => {
  return {
    post: jest.fn()
  };
});

describe('<Login/>', () => {
  beforeEach(() => {
    // Some requirements for the component to render in the test
    const history = createMemoryHistory();
    const state = '';
    history.push('/', state);

    render(
      <Router history={history}>
        <Login history={history} />
      </Router>
    );
  });
  test('should show empty email error', async () => {
    fireEvent.input(screen.getByRole('textbox', { name: /email/i }), {
      target: {
        value: ''
      }
    });

    fireEvent.submit(screen.getByRole('button', { name: /login/i }));

    await waitFor(() => {
      expect(screen.getByText(/email field is required/i)).toBeInTheDocument();
    });
  });
});

不幸的是，当我运行这个测试时，它给了我TypeError: Cannot read property 'then' of undefined，我不知道为什么

我的动作看起来像：

export const loginUser = (userData) => (dispatch) => {
  return axios
    .post('/api/users/login', userData)
    .then((res) => {
      const { token } = res.data;
      localStorage.setItem('jwtToken', token);
      setAuthToken(token);
      const decoded = jwt_decode(token);
      dispatch(setCurrentUser(decoded));
    })
    .catch((err) =>
      dispatch({
        type: GET_ERRORS,
        payload: err.response.data
      })
    );
};

与其在我的代码库中测试动作/减速器，我更愿意测试用户应该看到的内容，这是我读过的测试库所鼓励的。

我还在整个应用程序中使用 redux 挂钩 - useDispatch/useSelector。

任何帮助将不胜感激:)

标签： javascriptreactjsreact-reduxjestjsreact-testing-library