美文网首页
解决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