Javascript 酶'；s shallow正在渲染儿童'；谁的孩子？

我正在尝试为我的React应用程序设置一些简单的玩笑和酶测试。我正在使用

shallow

渲染我的应用程序的主容器，但是似乎正在渲染子容器和下面的所有子容器

  ● Test suite failed to run

    TypeError: Cannot read property 'NaN' of undefined

       7 | export function getRandomColor() {
       8 |      console.log(colors);
    >  9 |      return colorsKeys[Math.floor(Math.random() * colorsLength)];
         |                       ^
      10 | }
      11 |
      12 | export function determineColor(genotype) {

      at getRandomColor (src/utils/determineColor.js:9:19)
      at Object.<anonymous> (src/exampleState.js:10:16)
      at Object.<anonymous> (src/reducers/flowersReducer.js:1:1)
      at Object.<anonymous> (src/reducers/indexReducer.js:2:1)
      at Object.<anonymous> (src/index.js:14:1)
      at Object.<anonymous> (src/utils/determineColor.js:5:1)
      at Object.<anonymous> (src/components/NewFlowerFromPunnettButton.js:4:1)
      at Object.<anonymous> (src/components/Dashboard.js:2:1)
      at Object.<anonymous> (src/App.jsx:6:1)
      at Object.<anonymous> (test/App.test.js:4:1)

我希望浅层不会呈现子对象，或者如果预期的行为是呈现所有子对象，则子对象能够正确导入其模块。将

浅层

替换为

渲染

会导致相同的错误

---

通过克隆并在

浅层

上运行

npm运行测试

可复制只渲染子对象，您是正确的。根本原因：似乎

“/components/Dashboard”中包含在导入时运行的代码-一些顶级代码不是执行而不是声明

您可以更改
仪表板
而不这样做，或者提供它工作所需的数据，或者在可能直接或间接导入它的每个测试中显式模拟它：

App.test.js：

jest.mock('./components/Dashboard');

如果您选择以后的方法，可以通过创建<代码>组件/仪表板/y-MoksSy/index，jsx （或如何使用仪表板的文件名）来考虑自动锁定，但是要小心，不允许您使用多个“<代码>索引”的“自动锁”。JS < /代码>无论它们在不同的文件夹
您是对的，都有一些不必要的代码。导入时运行的“/components/Dashboard”。已将其删除，现在我有一个新错误。进展！谢谢！

    //App.jsx
    import React, { Component, Fragment } from "react";

    import "./css/App.css";
    import Punnett from "./components/Punnett";
    import FlowerTable from "./components/FlowerTable/FlowerTable";
    import Dashboard from "./components/Dashboard";

    class App extends Component {
        render() {
            return (
                <Fragment>
                    <div className="App">
                        <Punnett />
                        <Dashboard />
                    </div>
                    <div className="App">
                        <FlowerTable display={true} />
                    </div>
                </Fragment>
            );
        }
    }

    export default App;



    // determineColor.js
    import { colors } from "../types/colors";
    const colorsKeys = Object.keys(colors);
    const colorsLength = colorsKeys.length;

    import { store } from "../index";

    export function getRandomColor() {
        console.log(colors);
        return colorsKeys[Math.floor(Math.random() * colorsLength)];
    }


jest.mock('./components/Dashboard');