Как проверить компонент, который имеет внутренние компоненты - PullRequest
0 голосов
/ 21 февраля 2019

У меня есть компонент, который имеет 3 внутренних компонента.Я пытаюсь проверить основной компонент.Есть ли лучший способ / метод для тестирования основного контейнера?Почему он не умеет читать внутренний компонент?Почему мелкий не может найти внутренний компонент в следующем тесте?

import * as React from "react";
import ErrorBanner from 'src/Common/Components/ErrorBanner';
import { ForgotPassword } from "src/LogIn/Components/ForgotPassword";
import { ILogInEntity } from "src/model/LogIn";
import { ILogInErrorsEntity } from './LogINErrorsEntity';
import { LogInForm } from "./LogInForm";

interface IProps {
  loginInfo: ILogInEntity;
  loginErrors:ILogInErrorsEntity
  updateLoginInfo: (
    loginInfo: ILogInEntity,
    fieldName: string,
    value: string
  ) => void;
  performLogin: (logIn: ILogInEntity) => void;
  resetPasswordMessage: string;
  resetPassword: (login: string) => void;
  message?: string;
}

export class LogInPage extends React.Component<IProps, {}> {
  constructor(props: IProps) {
    super(props);
    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  public render() {
    return (
      <div>       
       <ErrorBanner error={String(this.props.message)} />      
          <LogInForm
            loginInfo={this.props.loginInfo}
            onChange={this.onChange}
            onLogIn={this.onSubmit}
            errors= {this.props.loginErrors}
          />

          <ForgotPassword
            login={this.props.loginInfo.login}
            onResetPassword={this.props.resetPassword}
            resetPasswordMessage={this.props.resetPasswordMessage}
          />


      </div>
    );
  }

  private onChange(fieldName: string, value: any) {
    this.props.updateLoginInfo(this.props.loginInfo, fieldName, value);
  }

  private onSubmit() {
    this.props.performLogin(this.props.loginInfo);
  }
}

Когда я пытаюсь протестировать компонент с помощью jest / энзимов, у меня появляется ошибка

FAIL src \ LogIn \ Components \ LogIn.spec.tsx ● Не удалось запустить набор тестов

Cannot find module 'src/Common/Components/ErrorBanner' from 'LogIn.tsx'

  at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
  at Object.<anonymous> (src/LogIn/Components/LogIn.tsx:5:21)

Тест -

import { mount, shallow } from "enzyme";
import * as React from "react";
import { LogInPage } from "./LogIn";

describe("login/components/login test", () => {
  it("should render as expected when passing required properties", () => {
    // Arrange
    const props = {
      loginErrors: {},
      loginInfo: { login: "", password: "" },
      message: "",
      // tslint:disable-next-line:no-empty
      performLogin: () => {},
      // tslint:disable-next-line:no-empty
      resetPassword: () => {},
      resetPasswordMessage: "",
      updateLoginInfo: () =>
        // tslint:disable-next-line:no-empty
        {}
    };

    // Act
    const component = mount(shallow(<LogInPage {...props} />).get(0));
    // tslint:disable-next-line:no-console
    console.log(component.debug())
    // Assert
    expect(component).toMatchSnapshot();
  });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...