Enzyme / Jest: Component (...): Ничего не возвращено из рендера. Обычно это означает, что инструкция возврата отсутствует. Или, чтобы ничего не визуализировать, верните null - PullRequest
Новая
       7

Enzyme / Jest: Component (...): Ничего не возвращено из рендера. Обычно это означает, что инструкция возврата отсутствует. Или, чтобы ничего не визуализировать, верните null

4 голосов
/ 04 февраля 2020

Я знаю, что эта проблема уже была решена в других статьях, но, несмотря на предложенные решения, я не могу решить проблему ...

Вот тест, который я пытаюсь реализовать: 

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()
  })
})

Компонент для тестирования является компонентом без состояния: 

//@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)

Вы можете найти ошибку здесь

Моя цель состоит в том, чтобы просто успешно протестировать рендеринг компонента, затем нажать на кнопку отправки. Как я должен сделать?

Спасибо за помощь!

...