Как протестировать этот компонент React HOC с помощью Jest & Enzyme? - PullRequest
0 голосов
/ 02 июля 2019

Новичок в React и модульном тестировании. Я пытался протестировать этот компонент, но результат оказался не таким, как я ожидал.Неважно, установил ли я реквизиты в true или false.Тесты всегда проходили.Может ли кто-нибудь помочь мне?

Я попробовал макет магазина.

Мой компонент, который я хочу для модульного тестирования:

/* eslint react/no-unused-prop-types:0 */
import React, { Component, Fragment } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { login } from "../utils/authentication";

// A parent container which checks if the user is logged in before rendering its children
// If the user is not logged in, a login action is initiated
class RequiresAuthentication extends Component {
  componentDidMount() {
    this.doLoginIfRequired();
  }

  componentDidUpdate() {
    this.doLoginIfRequired();
  }

  doLoginIfRequired() {
    const { userInitialised, hasAccess } = this.props;
    if (userInitialised && !hasAccess) {
      login.doLogin();
      return false;
    }
    return true;
  }

  render() {
    const { hasAccess, children } = this.props;
    if (!hasAccess) return null;
    return <Fragment>{children}</Fragment>;
  }
}

RequiresAuthentication.propTypes = {
  hasAccess: PropTypes.bool,
  userInitialised: PropTypes.bool,
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node
  ])
};

const mapStateToProps = state => ({
  hasAccess: state.auth.hasAccess,
  userInitialised: state.auth.userInitialised
});

export default connect(mapStateToProps)(RequiresAuthentication);

Тест, который я написал:

import React from "react";
import { shallow } from "enzyme";
import configureStore from "redux-mock-store";
import Auth from "./RequiresAuthentication";


let store;

describe("<Auth />", () => {
  beforeEach(() => {
    const mockStore = configureStore();
    store = mockStore({
      auth: {
        hasAccess: false,
        userInitialised: false
      }
    });
  });
  it("Should render the component only when auth props are true", () => {
    const wrapper = shallow(
      <Auth store={store}>
        <h1 className="hello">Hello</h1>
      </Auth>
    );
    expect(wrapper).not.toBe(null);
  });
});

Когда реквизиты ложные.Тестирование должно провалиться.но это не так.Как правильно протестировать этот компонент?Любая помощь очень ценится.Спасибо!101

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...