У меня есть компонент, который имеет 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();
});
});