Question

我正在尝试使用jest和酶为我的反应应用程序设置测试。我有一个组件<DetailView>，它取决于它接收的媒体类型呈现不同的子组件。像

render(){
var media;
var fileEnding = this.props.data.asset[0].DocumentInfo.FileExtension;
  switch(fileEnding){
    case "mp3":

            media = <Audio>
            break;
 case "obj": 
          media = <ThreeDView>
          break
....}

return(
  <Col lg={6}>
      {media}
    </Col>
)};

其中一个是使用threejs。我在index.html中包含了三个，如此

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js"></script>
<script src="https://threejs.org/examples/js/Detector.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

并通过externals

在webpack中

externals: {       
    "three":"THREE",
    "OrbitControls":"THREE.OrbitControls",
    "Detector": "Detector",

当我现在在我的测试中挂载<DetailView>组件时，它失败并显示消息：

FAIL  __tests__/DetailViewBeahviour.spec.js Test suite failed to run
Cannot find module 'Detector' from 'ThreeDView.js'

我尝试通过setup文件添加它：

global.Detector = require('three/examples/js/Detector');
console.log(global.Detector);

这给了我这个输出

console.log setup/setup.js:2
{ canvas: false,
  webgl: false,
  workers: false,
  fileapi: [Function: Blob],
  getWebGLErrorMessage: [Function: getWebGLErrorMessage],
  addGetWebGLMessage: [Function: addGetWebGLMessage] }

但是我仍然无法挂载组件，同样的错误，所以我假设它在<ThreeDView>组件中不可用。我查看了手动模拟示例，但又不了解如何使子组件可以访问它。

非常感谢任何提示

react + jest将设置环境传递给子组件

0 个答案: