Enzyme Shallow not finding a react-bootstrap Component

Question

Below is a Sign In React SignIn Component made by using Redux-forms

const renderInput = ({input,label,type,placeholder}) => {
  return (
      <div>
    <Form.Label>{label}</Form.Label>
    <Form.Control type={type} placeholder={placeholder} { ...input}/>
    </div>
  )
}

export let signInForm = props => {

    const { error,handleSubmit , pristine , submitting } = props

    return (
        <Container className="justify-content-md-center">

       <Alert variant="primary">Sign in here if you already have an account</Alert>

        <Form onSubmit={handleSubmit}>
            <Form.Group>           
            <Field name="email" component={renderInput} label="Email" type="email" placeholder="Email" />
            </Form.Group>

            <Form.Group>   
            <Field name="password" component={renderInput} label="Password" type="password" placeholder="Password" />
            </Form.Group>

            <Button type="submit"  disabled= { pristine || submitting }>Sign In</Button>

        </Form>

        </Container>

    )
}



export default signInForm = reduxForm ({
    form : 'signIn'
})(signInForm)

My enzyme-shallow test for this

import React from 'react';
import { shallow } from 'enzyme';
import {signInForm  as SignIn} from './SignIn';
import Button from 'react-bootstrap/Button'
import { expect } from 'chai';


describe('Test SignIn component', () => {
  it('Test click event', () => {
    const mockCallBack = jest.fn();

    let wrapper = shallow(<SignIn onSubmit={mockCallBack}/>);

    expect(wrapper.find(Button)).to.have.lengthOf(1);
})
})

My test output says AssertionError: expected {} to have a length of 1 but got 0

1) The test fails. The Button component is not found in the test. I am expecting it to have a length of 1

2) I am using chai method to.Have.lengthOf because I could not get the jest method toHaveLength to work. toHaveLength seems to be used for only checking arrays or strings size. How could I use jest to do this?

Borduhh Borduhh · Accepted Answer · 2019-03-06T03:24:45

If you are trying to simulate the SignIn form submit, you would actually call the simulate event on the form itself and not on the button.

You can simulate that with this code:

wrapper.find('form').simulate('submit');

Here is some info on why that is from the Enzyme docs:

Currently, event simulation for the shallow renderer does not propagate as one would normally expect in a real environment. As a
result, one must call .simulate() on the actual node that has the
event handler set.

Even though the name would imply this simulates an actual event, .simulate() will in fact target the component's prop based on the
event you give it. For example, .simulate('click') will actually get
the onClick prop and call it.

As noted in the function signature above passing a mock event is optional. Keep in mind that if the code you are testing uses the
event for something like, calling event.preventDefault() or accessing any of its properties you must provide a mock event object with the
properties your code requires.

https://airbnb.io/enzyme/docs/api/ShallowWrapper/simulate.html

Enzyme Shallow not finding a react-bootstrap Component

1 Answers