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

【问题标题】：Testing custom A-Frame events when using React and aframe-react使用 React 和 aframe-react 时测试自定义 A-Frame 事件
【发布时间】：2017-04-18 02:15:26
【问题描述】：

在MathworldVR 项目(https://github.com/michaltakac/mathworldvr) 中，我使用aframe-super-hands-component，当用户使用VR 手控制器点击/离开实体时，它会触发'hover-start' 和'hover-end' 事件。一切都按预期进行。

但是如何在测试中调用这些事件呢？当使用Enzyme 的shallow、react-test-renderer 的renderer 或Jest 渲染A-Frame 实体时，我无法从react-dom/test-utils 模拟具有TestUtils 的那些，因为它只能模拟traditional React events。

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

【问题讨论】：

似乎github.com/tonyhb/redux-ui 可能是解决方案 - 使用这种方法，我可以将所有内容提取到 Redux 并很好地测试它，功能风格。

标签： unit-testing reactjs aframe

【解决方案1】：

对于实际的浏览器测试，我会使用 Karma Test Runner。查看 aframe-react 的测试工具：https://github.com/aframevr/aframe-react/tree/master/tests/browser。有用于测试 React 渲染和 React 级别内容的 React 测试，以及用于测试包括事件在内的完整集成的 浏览器 测试。

【讨论】：