Question

美好的一天人！让我们说我有这个组件类：

＆＃13;

@connect(
  state =>({
    someState: state.oneLevel.response
  })
)
export default class SomeClass extends React.Component{
constructor(props){
  super(props)
  this.state ={
    someState: [],
    isLoading: false,
    isLoaded: false
  }
}
}

＆＃13;

此组件与superagent

进行异步调用

＆＃13;

componentDidMount(){
 var url = 'someapi.com/somedatatofetch'
 this.setState({isLoading: true})
 request.get(url)
 .set('some headers 1', 'somevalue')
 .set('some headers 2', 'somevalue')
 .then((success) => {
      this.setState({
        isLoading: false,
        isLoaded: true
      })
 })
}

＆＃13;

现在我已被指派为此Component编写单元测试，以检查它是否已成功更改其状态。我使用Jest作为我的测试框架和酶来处理DOM Renderer等。

＆＃13;

describe("Network Functionality", ()=>{
  const wrapper = mount(<Provider store={store}><SomeComponent /><Provider>)
  
  it("Should change the isLoaded state to true", ()=>{
    const expectedState = true
    //mocking with supertest
    return mockApi().get('testapi.com/someroute')
    .set('some-headers1', 'somevalue')
    .set('some-headers2', 'somevalue')
    .then((success) => {
    expect(wrapper.state(isLoaded)).toEqual(expectedState)
    })
  }
})

＆＃13;

使用该代码，响应如下： TypeError: Cannot read property 'isLoaded' of null

我的问题是，无论如何都要使用连接组件获取状态？我已尝试将组件导出为ConnectedComponents和{Components} 它完美无缺，但我想使用连接组件。

为什么我要使用连接组件？因为我的应用程序的每个组件都是使用这种方案构建的，并且它不可能作为ConnectedComponents和{Components}导出，因为我的应用程序中有这么多组件，它可能会导致更多问题

Answer 1

我通过查找Node组件设法解决了这个问题 wrapper.find('SomeComponent')如果你console.log()它，你会发现它将产生组件节点以及状态。这是我的最终代码

＆＃13;

describe("Network Functionality", ()=>{
  const wrapper = mount(<Provider store={store}><SomeComponent /><Provider>)
  
  it("Should change the isLoaded state to true", ()=>{
    const expectedState = true
    var somecomponent = wrapper.find("SomeComponent")
    //mocking with supertest
    return mockApi().get('testapi.com/someroute')
    .set('some-headers1', 'somevalue')
    .set('some-headers2', 'somevalue')
    .then((success) => {
    expect(somecomponent.getNode().state.isLoaded)toEqual(expectedState)
    
    })
  }
})

＆＃13;

＆＃13; 正如您所看到的，我正在制作另一个变量以包含SomeComponent搜索结果。最后，我调用了getNode（）函数来获取SomeComponent及其状态。我不知道这是不是最好的做法，但它确实有效。如果有更好的方法，我会喜欢一些反馈

在Jest＆amp;获取连接组件的状态酶

1 个答案: