3

私は酵素でテストしている 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' を読み取れません」というメッセージが表示されます。

これを浅いレンダリング単体テストとして保持したいのですが、マウントを使用してこのコンポーネントを深くレンダリングしたくありません。これには、jsdom などのブラウザーのような環境を使用する必要があります。

ありがとう。

4

1 に答える 1

3

無理だと思います。

浅いレンダリングドキュメントrefには、プロパティのドキュメントがありません。しかし、マウントレンダリングドキュメントにはそれがあります。

また、このgithub issueを確認できます。

私の意見では、マウント レンダリングを使用せず、classListおよびにアクセスする代わりにnextElementSibling、対応する状態変数を設定し、この変数に応じて必要な classNames を表示します。

于 2016-08-11T11:44:41.830 に答える