代码之家  ›  专栏  ›  技术社区  ›  Anupam Maurya

开玩笑的酶测试,通过作为obj函数的道具并期望返回测试

  •  0
  • Anupam Maurya  · 技术社区  · 6 年前

    我有登录组件,并且

    作为子组件的MobileNumber,

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

    登录.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]} />
    

    我已经在这里传递了函数。。。但我怎么能期望这个结果。。。我的测试头是否设置为“下一个”。。?

    1 回复  |  直到 6 年前
        1
  •  0
  •   Anupam Maurya    6 年前

    经过长时间的打猎,我找到了解决办法。。

    在这里,我使用连接的组件将元素呈现为传递给它的道具。

    代码如下:

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

    是的,我们需要传递模拟数据并将元素存储在路由提供程序中。