通过模拟不工作来反应开玩笑测试onSubmit

Question

这是我处理测试的第一周，我很困惑，我正在尝试测试登录组件，我已经测试了快照以确保模型行为不会改变，然后我想测试提交行为，这是我的代码：

登录组件.jsx

import React, { useState } from 'react';

import FormInput from '../form-input/form-input.component';
import CustomButton from '../custom-button/custom-button.component';
import { connect } from 'react-redux';

import {
  googleSignInStart,
  emailSignInStart,
} from '../../redux/user/user.actions';
import './sign-in.styles.scss';

export const SignIn = ({ emailSignInStart, googleSignInStart }) => {
  const [userCredentials, setCredentials] = React.useState({
    email: '',
    password: '',
  });
  const { email, password } = userCredentials;

  const handleSubmit = async (event) => {
    event.preventDefault();
    emailSignInStart(email, password);
  };

  const handleChange = (event) => {
    const { value, name } = event.target;
    setCredentials({ ...userCredentials, [name]: value });
  };

  return (
    <div className="sign-in">
      <h2>I already have an account</h2>
      <span>Sign in with your email and password</span>

      <form onSubmit={handleSubmit}>
        <FormInput
          name="email"
          type="email"
          handleChange={handleChange}
          value={email}
          label="email"
          required
        />
        <FormInput
          name="password"
          type="password"
          value={password}
          handleChange={handleChange}
          label="password"
          required
        />
        <div className="buttons">
          <CustomButton type="submit"> Sign in </CustomButton>
          <CustomButton
            type="button"
            onClick={googleSignInStart}
            isGoogleSignIn
          >
            Sign in with Google
          </CustomButton>
        </div>
      </form>
    </div>
  );
};

const mapDispatchToProps = (dispatch) => ({
  googleSignInStart: () => dispatch(googleSignInStart()),
  emailSignInStart: (email, password) =>
    dispatch(emailSignInStart({ email, password })),
});

export default connect(null, mapDispatchToProps)(SignIn);

签名.test.js

import { shallow , mount } from 'enzyme';
import React from 'react';
import toJson from 'enzyme-to-json';
import { SignIn } from '../sign-in.component';

describe('Sign In component', () => {

    let wrapper;
    const mockemailSignInStart = jest.fn();
    const mockgoogleSignInStart = jest.fn();
    const mockHandleSubmit = jest.fn();

    beforeEach(() => {
          wrapper = shallow(<SignIn 
            emailSignInStart={mockemailSignInStart} 
            googleSignInStart={mockgoogleSignInStart}/>
        );
    });

    it('expect to render signIn component', () => {
        expect(toJson(wrapper)).toMatchSnapshot();
    });

    it('expect call fn on submit', () => {
        wrapper.find('form').simulate('submit');
        expect(mockHandleSubmit).toBeCalled();
    });
});

我试过挂载和渲染，但总是期望toBeCalled总是返回 0

Answer 1

我在您的代码中看到 2 个问题：

1）我认为：

expect(mockHandleSubmit).toBeCalled();

实际上应该是

expect(mockemailSignInStart).toBeCalled();

因为handleSubmit发送emailSignInStart你用googleSignInStart模拟。

2）您应该将一些参数传递给您的simulate('submit') ，否则handleSubmit会在调用event.preventDefault(); . 例如，您可以只使用：

wrapper.find("form").simulate("submit", { preventDefault: jest.fn() });