试图为React okta widget组件编写一个jest和酶测试

时间:2018-04-05 00:58:01

标签: javascript reactjs enzyme jest okta

使用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登录小部件。

0 个答案:

没有答案