Enzyme find not working at finding component inside an already shallowed component

Question

I'm trying to do a unit test of a login component that includes a form with a Button from the library https://react.semantic-ui.com/, the component is this:

<LoginComponent onSubmit={onSubmit} data={req.data} />

and I have my current test like this:

import React from 'react';
import { mount, configure } from 'enzyme';
import { Button } from 'semantic-ui-react';
import LoginComponent from './LoginComponent';
import Adapter from 'enzyme-adapter-react-16';

configure({adapter: new Adapter()});

it('Email check', () => {
    const wrapper = mount(<LoginComponent data={undefined} onSubmit={ console.log("submitted" }/>);
    console.log(wrapper.find(Button));
})

The console log returns ReactWrapper {} Edit

Here is the source code of the loginComponent is :

import React, {useEffect} from 'react'
import useForm from 'react-hook-form'
import { Grid, Message, Card, Input, Button, Form, Image } from 'semantic-ui-react'
import { REGEX_EMAIL_VALIDATION, ERROR_LOGIN_INVALID } from '../common/consts';
import './login.css'

const LoginComponent = props => {

    const { register, handleSubmit, setValue } = useForm();

    const handleFormChange = type => event => {
        setValue(type, event.target.value)
    }

    useEffect(()=> {
        register({name: 'email'}, {required: true, pattern: REGEX_EMAIL_VALIDATION})
        register({name: 'password'}, {required: true, min: 6})
    }, [register])

    return(
        <Grid centered columns={4} verticalAlign='middle' className="h-100">
            <Grid.Row>
                <Grid.Column textAlign="center" >
                    <Card centered fluid raised={true} className='card-login'>
                        <Card.Content>
                            <Image src='img/logo.png' size='small' className='pa4'/>
                            { props.data !== undefined ? 'AuthError' in props.data && (
                                    <Message negative>
                                        <Message.Header>{ERROR_LOGIN_INVALID}</Message.Header>
                                    </Message>
                                    )
                                    : null
                            }
                            <Form onSubmit={handleSubmit(props.onSubmit)} className='pt3'>
                                <Form.Field>
                                    <Input icon='user' type="email" name="email" placeholder="Correo Electronico" 
                                        className='login-input' size="big" onChange={handleFormChange('email')} />
                                </Form.Field>
                                <Form.Field>
                                    <Input icon='lock' type="password" name="password" placeholder="Contraseña"
                                        className='login-input'size="big" onChange={handleFormChange('password')} />
                                </Form.Field>
                                <Form.Field className='pt3'>
                                    <Button fluid type='submit' content='Iniciar Sesión' size="big" className='login-button' id="suh"/>
                                </Form.Field>
                            </Form>
                        </Card.Content>
                    </Card>
                </Grid.Column>
            </Grid.Row>
        </Grid>
    )
}

export default LoginComponent;

Answer 1

This is normal; you'll usually get ReactWrapper {} whether an element was found or not. Try console.log(wrapper.find(Button).length); to see if matching elements/components were found. If so, you can do console.log(wrapper.find(Button).debug()); to see its contents.