美文网首页
解决antd Form.create() 过的组建,Enzyme

解决antd Form.create() 过的组建,Enzyme

作者: 是嘤嘤嘤呀 | 来源:发表于2020-03-11 14:39 被阅读0次

    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 (
          <div>
            <Button onClick={() => this.test()}>{btnName}</Button>
          </div>
        );
      }
    }
    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(<LoginPage />);
        let form = wrapper.instance();
        let LoginPageComponent = mount(<LoginPage.WrappedComponent form={form}/>)
        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

          本文链接:https://www.haomeiwen.com/subject/bflcjhtx.html