reactjs - 使用 enzyme 进行浅层渲染简单测试不起作用

Question

我对 enzyme /浅渲染测试非常陌生。我可能还没有完全理解。

使用这个简化的组件:

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

错误。

如果需要，我可以粘贴“许多行浅层包装内容”，但我认为它不相关，而且我的问题在其他地方 - 可能在我周围的某个地方不知道如何使用浅层渲染内容。

Answer 1

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

相反，从 .find() 返回的 ShallowWrapper 具有 .length 属性。尝试使用它来代替。

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