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

Question

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

登录-component.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);

sign.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 总是 return 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() });

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

React jest testing onSubmit by simulate not working

javascript

reactjs

jestjs

enzyme