Question

我对酶/浅渲染测试很新。我可能还没有完全理解它。

使用这个简化的组件：

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

我在搜索结果中尝试了＆＃39; PlacementOption＆＃39; ， 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

错误。

我可以粘贴很多很多浅层包装内容＆＃34;如果需要，但我不认为它是相关的，我的问题是在其他地方 - 可能在我周围的某个地方不知道如何使用浅渲染的东西。

Answer 1

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

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

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

使用酶简单测试无法工作的浅层渲染

1 个答案: