mardi 4 février 2020

Enzyme/Jest: Component(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

I know this problem has already been solved in other posts, but despite the solutions offered, I cannot solve the problem...

Here is the test I'm trying to realize:

import React from 'react'
import renderer from 'react-test-renderer'
import { Provider } from 'react-redux'
import store from '../core/redux-utils/store'
import { shallow, mount } from 'enzyme'
import Auth from '../screens/Auth'
import AuthForm from '../screens/Auth/AuthForm'
import { MDBBtn } from 'mdbreact'


jest.mock('react', () => {
  const React = jest.requireActual('react')
  React.Suspense = ({ children }) => children
  return React
})

describe('Test <Auth /> component', () => {
  it('renders as expected', () => {
    const wrapper = shallow(
      <Provider store={store}>
        <Auth />
      </Provider>
    )
    expect(wrapper.dive()).toMatchSnapshot()
  })
})

describe('Test <AuthForm /> component', () => {
  let wrapper
  let props

  beforeEach(() => {
    props = {
      handleSubmit: jest.fn(),
      t: jest.fn()
    }
    wrapper = mount(<AuthForm {...props} />, {
      disableLifecycleMethods: true
    })
  })

  it('should render correctly', () => {
    const tree = renderer.create(<AuthForm {...props} />)
    expect(tree.toJSON()).toMatchSnapshot()
  })

  it('should find submit button', () => {
    console.log(wrapper.debug())
    expect(wrapper.find('button').simulate('click'))
    expect(props.handleSubmit).toHaveBeenCalled()
  })
})

The component to test is a stateless component:

//@flow
import React from 'react'
import { withTranslation } from 'react-i18next'
import { MDBContainer, MDBBtn, MDBInput } from 'mdbreact'
import Title from '../../sharedComponents/Title'

type Props = {
  handleChange: Function,
  handleSubmit: Function,
  t: any
}

const AuthForm = ({ handleChange, handleSubmit, t }: Props) => (
  <MDBContainer className='form-container'>
    <Title className='mb-5' title={t('auth-title')} />
    <form onSubmit={handleSubmit} className='d-flex flex-column'>
      <MDBInput
        label={t('auth-login-label')}
        name='email'
        type='email'
        hint={t('auth-login-hint')}
        onChange={handleChange}
        required
      />

      <MDBInput
        label={t('auth-password-label')}
        name='password'
        type='password'
        hint={t('auth-password-hint')}
        onChange={handleChange}
        required
      />

      <a href='/' className='mt-0 mb-5'>
        {t('auth-password-forgotten')}
      </a>

      <MDBBtn type='submit'>{t('auth-button')}</MDBBtn>
    </form>
  </MDBContainer>
)

export default withTranslation()(AuthForm)

You can find the error here

My goal is to simply succeed in testing the rendering of the component, then to click on the submit button. How should I do ?

Thank you for your help !

Aucun commentaire:

Enregistrer un commentaire