首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >酶的浅显是渲染孩子的孩子吗?

酶的浅显是渲染孩子的孩子吗?
EN

Stack Overflow用户
提问于 2019-07-12 03:44:37
回答 1查看 663关注 0票数 0

我正在尝试为我的React App设置一些简单的Jest和Enzyme测试。我使用shallow来渲染我的应用程序的主容器,但是看起来下面的孩子和所有的孩子都被渲染了。

代码语言:javascript
复制
  ● 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)

Per the Enzyme docs“浅层呈现有助于将您自己约束为一个单元来测试组件,并确保您的测试不会间接断言子组件的行为。”

This SO answer似乎澄清说,shallow“将呈现其所有的孩子和孩子的孩子,依此类推”。

代码语言:javascript
复制
    //App.test.js
    import React from "react";
    // shallow prevents rendering of sub components????
    import { shallow, mount, render } from "enzyme";
    import App from "../src/App";

    describe("<App />", () => {
        const app = shallow(<App />);
        it("Should render ", () => {
            expect(app).toMatchSnapShot();
        });
        it("Should have <Punnett/> <Dashboard/> and <FlowerTable />", () => {
            expect(app.find("<Punnett />")).toBeTruthy();
            expect(app.find("<Dashboard/>")).toBeTruthy();
            expect(app.find("<FlowerTable />")).toBeTruthy();
        });

    });
代码语言:javascript
复制
    //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;
代码语言:javascript
复制
    // 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)];
    }

我期望浅层不渲染子模块,或者如果预期的行为是渲染所有子模块,那么子模块能够正确地导入它们的模块。将shallow替换为render会导致相同的错误。

可通过在https://github.com/nodes777/flower-game-phaser3上克隆和运行npm run test进行复制

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-07-13 14:26:20

shallow确实只渲染子对象,您是对的。根本原因:似乎"./components/Dashboard";内部有运行在import上的代码-一些执行而不是声明的顶级代码。

您可以在不这样做的情况下更改Dashboard,或者提供它工作所需的数据,或者在可能直接或间接导入它的每个单独测试中显式地模拟它:

App.test.js:

代码语言:javascript
复制
jest.mock('./components/Dashboard');

如果您选择以后的方法,您可以考虑通过创建components/Dashboard/__mocks__/index.jsx自动锁定(或如何使用仪表板的文件名),但要注意bug in jest,它禁止您对多个index.js使用自动锁定,而不管它们位于不同的文件夹中

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56996300

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档