浅渲染使用 Refs 的 React/Enzyme 组件

Posted 2023-03-08

【中文标题】浅渲染使用 Refs 的 React/Enzyme 组件

【英文标题】：Shallow render a React/Enzyme component that uses Refs

【发布时间】：2016-12-18 01:15:36

【问题描述】：

我有一个用 Enzyme 测试的 React 组件，例如，它看起来像这样：

import React, Component from 'react'

class Foo extends Component 
  constructor(props) 
    super(props)
    this.showContents = this.showContents.bind(this)
  

  showContents() 
    this.button.classList.toggle("active")
    this.button.nextElementSibling.classList.toggle("show")
    this.props.onRequestShowContents()
  

  render() 
    return (
      <div className="wrapper">
        <button ref=(ref) => this.button = ref onClick=this.showContents>Click to view contents</button>
        <div className="panel">
          this.props.contents
        </div>
      </div>
    )
  


export default Foo

我正在使用 Mocha/Chai/Enzyme 编写一些单元测试，我想模拟按钮按下以检查我的 props func 是否被调用。

我的基本酶测试如下所示：

import React from 'react'
import  shallow  from 'enzyme'
import Foo from '../components/Foo'
import chai from 'chai'
import expect from 'expect'
var should = chai.should()

function setup() 
  const props = 
    onRequestShowContents: expect.createSpy(),
    contents: null
  

  const wrapper = shallow(<Foo ...props />)

  return 
    props,
    wrapper
  


describe('components', () => 
  describe('Foo', () => 
    it('should request contents on button click', () => 
      const  props, wrapper  = setup()
      const button = wrapper.find('button')
      button.props().onClick() //this line causes the error
      props.onRequestShowContents.calls.length.should.equal(1)
    )
  )
)

当在点击处理程序中访问this.button 时，有什么方法可以调整测试或我的组件代码以避免错误？我得到“TypeError：无法读取未定义的属性 'classList'”。

我想把它作为一个浅渲染单元测试，不想用 mount 深度渲染这个组件，这需要使用类似浏览器的环境，例如 jsdom。

谢谢。

【参考方案1】：

我认为这是不可能的。

浅渲染docs 没有ref 属性的文档。不过挂载渲染docs有。

另外，您可以查看github issue。

在我看来，不使用挂载渲染，而不是访问classList和nextElementSibling，设置相应的状态变量并根据该变量显示所需的类名。

【讨论】：

好建议。我正在使用 Redux 进行状态管理，所以我可以在我的高阶 react-redux connect() 组件中构建正确的类列表。我会试一试，谢谢。

@Michael，我认为为此您可以拥有本地状态，即使您使用的是 redux。前任。 this.state = isVisible = false ，然后当您单击button 时，切换此状态变量并在render 函数中根据此变量显示相应的类。

我想让它成为一个无状态的展示组件，所以我可以传入一个从上面管理的show prop，然后在组件内显示正确的类作为结果基于this.props.show。