Enzyme/Jest:组件(...):渲染没有返回任何内容。这通常意味着缺少返回语句。或者,不渲染任何内容,返回 null

ale*_*ean 5 testing unit-testing reactjs jestjs enzyme

我知道这个问题已经在其他帖子中解决了,但是尽管提供了解决方案,但我无法解决问题......

这是我试图实现的测试:

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()
  })
})
Run Code Online (Sandbox Code Playgroud)

要测试的组件是无状态组件:

//@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)
Run Code Online (Sandbox Code Playgroud)

你可以在这里找到错误

我的目标是简单地成功测试组件的渲染,然后单击提交按钮。我应该怎么做 ?

感谢您的帮助 !