CODEWITHSUNDEEP
reactjsantd
J_P
J_P

Reputation: 609

How do I stub Ant Design's Form getFieldDecorator()?

I'm trying to do a simple Jest snapshot test of a form but when running the test I get the error: 

Uncaught [TypeError: getFieldDecorator(...) is not a function]

I thought I could just create a stub for getFieldDecorator and pass this in the props but it doesn't work.

This is the test:

  it('renders correctly initially', () => {

const testForm = {
  getFieldDecorator: jest.fn()
};

const wrapper = mount(
  <Router>
    <LoginForm form={testForm} />
  </Router>
);

expect(wrapper).toMatchSnapshot();

});

This is the render() method in my component:

  render() {
const { form } = this.props;
const { getFieldDecorator } = form;

return (
  <Form onSubmit={this.handleSubmit} className="login-form">
    <FormItem>
      {getFieldDecorator('username', {
        rules: [{ required: true, message: 'Please enter your username!' }]
      })(
        <Input
          prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
          placeholder="Username"
        />
      )}
    </FormItem>

I'm exporting my component as:

export default withRouter(Form.create()(LoginForm));

Upvotes: 6

Views: 2894

Answers (1)

Sasha
Sasha

Reputation: 5944

You're on correct way, the only thing you've missed is that the getFieldDecorator should return a function, so you need to mock it accordingly i.e.:

const testForm = {
  getFieldDecorator: jest.fn( opts => c => c )
};

Upvotes: 12

Related Questions