解决antd Form.create() 过的组建,Enzyme simulate以后,函数监听不到是否执行

1、查找思路

(1)去掉Form.create(),一切正常;
(2)打印instance(),发现其中的变量和函数都属于form。

2、解决方式

(1)尝试mount WrappedComponent,报this.props.form undefined;
(2)尝试传入form,至此问题解决。

3、demo

/**
* 代码只给出了该问题的解决方式,其他相关配置并未给出。
*/
// LoginPage.js
import {Button, Form} from "antd"
class LoginPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      btnName: "unclick"
    };
  }
  test = () => {
    console.log('test')
    this.setState({
      btnName: "clicked"
    })
  }
  render() {
    const {btnName} = this.state;
    const { getFieldDecorator, validateFields } = this.props.form;
    return (
      
); } } LoginPage = Form.create({})(LoginPage); export default LoginPage; // login.test.js import LoginPage from "./LoginPage"; import { Input, Button } from "antd"; const { shallow, mount, render } = Enzyme; describe("loginCheck", function() { it("检查点击按钮是否触发test函数", () => { let wrapper = shallow(); let form = wrapper.instance(); let LoginPageComponent = mount() LoginPageComponent.instance().test = jest.fn(); LoginPageComponent.instance().forceUpdate(); LoginPageComponent.update(); LoginPageComponent.find(Button).simulate('click'); expect(LoginPageComponent.instance().test).toBeCalled(); LoginPageComponent.instance().test.mockClear(); }); });

你可能感兴趣的:(解决antd Form.create() 过的组建,Enzyme simulate以后,函数监听不到是否执行)