Question

我有登录组件，并且

MobileNumber作为子组件，

我正在将道具详细信息从LoginComponent传递到MobileComponent

login.js

setHeaderInfo = () => {
    this.setState({
      showHeader: true,
      headerContent: {
        headerContent: {
         showBckBtn: true,
         headerTitle: 'Next'
        },
        headerTitle
      }
    })
  }
return(
<MobileComponent setHeaderInfo={this.setHeaderInfo}>
)

现在可以测试js了：

  let wrapper = shallow(<Login  />)

  const MobileNumberComponent = wrapper.find('MobileNumberComponent')

  it('header Title text checking', () => {
    MobileNumberComponent.props().setHeaderInfo( () => ({setHeaderInfo: {
      showHeader: true,
      headerContent: {
        showBckBtn: true,
        headerTitle: 'Next'
        }
    }}))
  })

在console.log中

    console.log(MobileNumberComponent.debug())
<MobileNumberComponent setHeaderInfo={[Function]} />

我已经在此处传递了函数...但是，无论我的测试标头是否设置为'Next'，我怎么能期望输出...？

Answer 1

经过漫长的狩猎，我找到了解决方案。

在这里，我正在使用连接的组件将元素渲染为传递到其中的道具。

下面是代码：

import { mountWrap } from '../contextWrap'
import { Provider } from 'react-redux'
import sinon from 'sinon'
import Login from '../components/Login/'
// import makeStore from '../redux/createStore'

import React from 'react'
import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'

const mockStore = configureMockStore([ thunk ])
const authDetails = {
  'authDetails' : {
    Terms :''
  }
}

const match = {
  params : {}
}
let actionSpy = sinon.spy()
let actionHistorySpy = sinon.stub({})
let authDetails_ = sinon.stub(authDetails)
let store
let component
/* eslint-disable */
describe('tests for MyContainerComponent', () => {
  beforeEach(() => {
    store = mockStore(authDetails)
    component = mountWrap(<Provider store={ store }>
      <Login history={actionHistorySpy} match={match} setGlobalLoaderStatus= {actionSpy} userDetail={authDetails_} />
     </Provider>)
  })

  it('renders container', () => {
    console.log(component.debug())
  })
})

是的，我们只需传递模拟数据并存储元素，就像在路由提供程序中一样。

开玩笑的酶测试，将道具作为obj函数传递并期望返回测试

1 个答案: