如何测试功能组件并获得完整的覆盖率报告

Question

我试图获得一份完整的覆盖率报告并试图涵盖我的 React 项目的所有单元测试，我知道这只是为了获得 100% 的完整报告，没有它我可以做到，但我想知道是否有什么办法涵盖 SFC 上的所有测试，以获得 100% 的覆盖率报告。

这是我的组件：

import React, { useEffect } from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";

///Components
import UserForm from "../../components/user-form/user-form.component";

//Actions
import { getUserStartActionable, updateUserStart  } from "../../redux/admin-user/admin-user.actions";

//Selector
import { selectGetUser } from "../../redux/admin-user/admin-user.select";

import { SpinnerLoading } from "../../utils/styles.utils";

import {
  WrapContainer,
  UserBody,
  UserHeader,
  UserFooter,
} from "./update-user.styles";

/***
 * Componente que renderiza la página para realizar
 * el registro de usuarios pacientes
 * @param {Object} state
 * @param {Function} createUser
 * @return {Component} RegisterUsersPage
 */
export const UpdateUser = ({ match, getUser, patientState }) => {

  const fetchStart = () => {getUser(match.params.patientId)};
      

  useEffect(fetchStart, []);

  return (
    <WrapContainer>
      <UserHeader>
        <h3>Actualizar Usuario</h3>
      </UserHeader>
      <UserBody>
        {patientState.user ? (
          <UserForm user={patientState.user} type="UPDATE" />
        ) : (
          <SpinnerLoading text="Cargando información" />
        )}
      </UserBody>
      <UserFooter></UserFooter>
    </WrapContainer>
  );
};

//Selector de estados
const mapStateToProps = createStructuredSelector({
  patientState: selectGetUser,
});

//Despachador de acciones
const mapDispatchToProps = (dispatch) => ({
  getUser: (user) => dispatch(getUserStartActionable(user)),
});

export default connect(mapStateToProps, mapDispatchToProps)(UpdateUser);

所以当运行“yarn test --coverage”

update-user.component.jsx          |    66.67 |        0 |       25 |    85.71 |                73 |

我的测试：

describe("<UpdateUser />", () => {
  let wrapper;

  beforeEach(() => {
    
    wrapper = shallow(<UpdateUser />);
  });

  it("should render the RegisterUsers Page", () => {
    expect(wrapper).toMatchSnapshot();
  });

  
});

那么我如何覆盖调度getUser？

非常感谢

Answer 1

这是一种测试 redux 动作的方法：

import { setResults } from '...';

it('setResults action works as expected', () => {
    const results = ['sample result1',  'sample result2'];
    const expectedAction = {
        type: actions.SET_RESULTS,
        data: results
    };
    expect(setResults(results)).toEqual(expectedAction);
});

这是测试 redux 减速器的一种方法：

import { setResults } from '...';
import { setResultsReducer } from '...';

it('returns state with detailedResult value when setDetailedResult(detailedResult) ' +
        'action has been called', () => {
    const resultsValue = ['sample result1', 'sample result2'];
    expect(setResultsReducer([], setResults(resultsValue)))
            .toEqual({results: resultsValue});
});