使用jest
为此enzyme
组件编写React
测试的最佳方法是什么,该组件假定呈现Okta
登录小组件。以下是React
组件代码:
import React from 'react'
import { connect } from 'react-redux'
import './login.scss'
import api from "../../../api";
import { SubmissionError, Field, reduxForm } from "redux-form";
class LoginContainer extends React.Component {
okta = () => {
window.location.href = 'https://oktaloginurl';
}
render() {
return <SimpleForm okta={this.okta} />;
}
}
const simpleForm = props => {
const { error, handleSubmit, pristine, reset, submitting } = props;
return (<div className="container">
<div className="card card-container">
<p id="profile-name" className="profile-name-card">{error && <strong>{error}</strong>}</p>
<button className="btn btn-lg btn-primary btn-block btn-signin" onClick={props.okta}>
Login with Okta
</button>
</div>
</div>)
}
const SimpleForm = reduxForm({
form: "submitValidation" // a unique identifier for this form
})(simpleForm);
export default LoginContainer;
这是我在写测试方面取得的进展:
import React from 'react';
import LoginContainer from '../src/containers/login'
import { shallow, mount } from "enzyme";
describe("<SimpleForm />", () => {
let oktaProp = 'https://oktaloginurl';
let wrapper = mount(<SimpleForm okta={oktaProp} />);
it('should render with props without throwiing an error', () => {
expect(shallow(wrapper).exists(<div className="container"></div>)).toBe(true);
});
it("renders a login button",() => {
expect(shallow(wrapper).find('.btn .btn-lg .btn-primary .btn-block .btn-signin').length).toEqual(1);
});
it("renders the Okta login widget", () => {
expect(shallow(<SimpleForm okta={oktaProp} />).find('.btn .btn-lg .btn-primary .btn-block .btn-signin')).simulate('click');
})
});
我想要测试的是登录按钮正确呈现,点击它时会显示Okta登录小部件。