Question

我想为React组件的方法编写单元测试。

组件的代码是

        export class LoginForm extends Component {

        constructor() {
            super();
            this.tryLoginProp = this.tryLoginProp.bind(this)
        }

        render() {
            return (
                <div className="login-form">
                    <div className="form-input">
                      <CustomButton label="Log in"
                        class="login-button"
                        action={this.tryLoginProp}
                        id="login-button-loginform"
                        renderSpinner={this.props.renderSpinner}
                      />
                    </div>
                </div>
            )
        }

        tryLoginProp () {
          if (!this.props.renderSpinner) {
            this.props.tryLoginProp()
          }
        }
    }

    const mapStateToProps = (state) => {
      return {
        login: state.login,
        renderSpinner: state.layout.renderSpinner
      };
    };


    const mapDispatchToProps = (dispatch) => ({
      tryLoginProp: () => {
        dispatch(tryLogin())
      }
    });

    export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

我想为tryLoginProp方法编写单元测试，但我没有得到如何模拟this.props.tryLoginProp函数并传递测试用例。

目前的单元测试如下：

 describe('<LoginForm />', () => {

  const initialState = {renderSpinner: false};
  let wrapper;

  beforeEach(() => {
    wrapper = mount(<LoginForm {...initialState}/>);
  });

  it('renders without expolding', () => {
    expect(wrapper.length).toEqual(1);
  });

  it('tryLoginProp should dispatch an action', () => {
    expect(wrapper.tryLoginProp()). //test tryLoginProp method.
  })
});

请帮我为这种方法编写适当的测试用例。

由于

Answer 1

您可以使用wrapper.instance().tryLoginProp()来调用方法......就像我想的那样，无需测试

it('tryLoginProp should dispatch an action', () => {
  const mockedTryLoginProp = jest.fn();
  const wrapper = shallow(
    <LoginForm 
      tryLoginProp={mockedTryLoginProp}
      renderSpinner={false}
    />
  );
  wrapper.instance().tryLoginProp();
  expect(mockedTryLoginProp).toHaveBeenCalled();
})

在旁注中，您可以考虑以不同于传入的内部函数的方式命名内部函数以避免混淆

用jest

1 个答案: