2

我正在尝试使用 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 中包含了threejs

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

在 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>。我查看了手动模拟示例，但再次不明白如何使其可供子组件访问。

非常感谢任何提示

4

0 回答 0