Question

我有一个包含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);
  }
}

当我尝试用开玩笑/酶测试组件时，我遇到了错误

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();
  });
});

如何测试具有内部组件的组件

0 个答案: