使用酶简单测试的浅层渲染不起作用

Question

我对 enzyme/shallow 渲染测试还很陌生。我可能还没有完全理解它。

使用这个简化的组件：

export const PlacementOption = (props) => <div/>
const UpdatingSelectField = (props) => <div/>

export class DevicePlatforms extends Component{                                                                                                         
  render(){                                                                                                                                             
    return <div>                                                                                                                                        
      <UpdatingSelectField/>
      {this.props.value.device_platforms && this.props.children}                                                                                        
    </div>                                                                                                                                              
  }                                                                                                                                                     
}

我正在尝试测试 DevicePlatforms。如果 this.props.value.device_platforms 不存在，则不呈现子项，如果存在，则呈现它们。

import React from 'react';                                                                                                                              
import { shallow, mount, render } from 'enzyme';                                                                                                        
import { DevicePlatforms } from './Placement.js';                                                                                                       
import { PlacementOption } from './Placement.js'                                                                                                        

describe("<DevicePlatforms/>", function() {                                                                                                             
  it("with all devices selected renders all children", function() {                                                                                     
    const value = {                                                                                                                                     
      device_platforms: "mobile/desktop",                                                                                                               
    }                                                                                                                                                   
    const Component = <DevicePlatforms                                                                                                                  
      value={value}
    >                                                                                                                                                   
      <PlacementOption/>                                                                                                                                
      <PlacementOption/>                                                                                                                                
    </DevicePlatforms>                                                                                                                                  

    const wrapper = shallow(Component)                                                                                                                  
    expect(wrapper.find('PlacementOption')).toBe(2)
  })                                                                                                                                                    

  it("with no devices selected renders no children", function() {                                                                                       
    const value = {}                                                                                                                                    
    const Component = <DevicePlatforms                                                                                                                  
      value={value}                                                                                                                                     
    >                                                                                                                                                   
      <PlacementOption/>                                                                                                                                
      <PlacementOption/>                                                                                                                                
    </DevicePlatforms>                                                                                                                                  

    const wrapper = shallow(Component)                                                                                                                  
    expect(wrapper.find('PlacementOption')).toBe(0)                                                                                                     
  })                                                                                                                                                    
})

我在查找调用中尝试了 'PlacementOption'、PlacementOption。

我得到的只是一个：

Expected ShallowWrapper({ many many lines of shallow wrapper content }) to be 3
Expected ShallowWrapper({ many many lines of shallow wrapper content }) to be 0

错误。

如果需要，我可以粘贴 "many many lines of shallow wrapper content"，但我不认为它是相关的，我的问题在其他地方 - 可能在我周围的某个地方不知道如何使用浅渲染的东西。

Answer 1

您断言酶 ShallowWrapper 等于 3 或 0。这没有意义。

相反，从 .find() 返回的 ShallowWrapper 有一个 .length 属性。尝试改用它。

expect(wrapper.find('PlacementOption').length).toBe(2)

使用酶简单测试的浅层渲染不起作用

Shallow rendering using enzyme simple test not working

reactjs

enzyme