测试自定义A帧事件时使用React和aframe-react

Question

在MathworldVR项目(https://github.com/michaltakac/mathworldvr)中，我使用的是aframe-super-hands-component，当用户点击/离开实体时，它会触发'hover-start'和'hover-end'事件。一切都如期而至。

但是，如何从内部测试中调用这些事件呢？当A帧实体使用TestUtils的shallow、react-test-renderer的renderer或Jest呈现时，我无法从react-dom/test-utils中模拟这些实体，因为它只能模拟传统反应事件。

CalcButton组件代码：

import 'aframe'
import 'super-hands'
import React from 'react'
import { Entity } from 'aframe-react'

export default class CalcButton extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      depth: 0.02,
      opacity: 1,
    }

    this.startIntersection = this.startIntersection.bind(this)
    this.endIntersection = this.endIntersection.bind(this)
  }

  startIntersection() {
    this.setState({ depth: 0, opacity: 0.2 })
  }

  endIntersection() {
    this.setState({ depth: 0.02, opacity: 1 })
  }

  render() {
    const { depth, opacity } = this.state
    return (
      <Entity
        className="interactive"
        geometry={{ primitive: 'box', height: 1, width: 1, depth }}
        material={{ shader: 'flat', side: 'double', color: 'green', opacity }}
        scale={{ x: 0.5, y: 0.5, z: 0.5 }}
        position={{ x: 0.5, y: 0.5, z: 0.5 }}
        hoverable
        events={{
          'hover-start': this.startIntersection,
          'hover-end': this.endIntersection,
        }}
      >
        <Entity text="Test button" />
      </Entity>
    )
  }
}

拟议的CalcButton测试：

import React from 'react'
import { shallow } from 'enzyme'
import CalcButton from '.'

jest.mock('react-dom')

describe('CalcButton', () => {
  it('simulates hover-start event', () => {
    const wrapper = shallow(<CalcButton />)
    // TODO: Somehow figure out how to simulate event and
    // check if <a-entity> has a geometry.opacity equal to 0.2
  })
})

Answer 1

对于实际的浏览器测试，我将使用。查看aframe的测试线束：https://github.com/aframevr/aframe-react/tree/master/tests/browser。有反应测试，反应呈现和反应级别的东西，和浏览器测试，测试完全集成，包括事件。