Мелкий фермент рендерит детей?

Question

Я пытаюсь настроить простое тестирование в Jest и Enzyme для моего приложения 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)

Согласно Enzyme docs"Мелкий рендеринг полезен для того, чтобы ограничиться тестированием компонента как модуля и убедиться, что ваши тесты не косвенно утверждают поведение ребенкакомпоненты. "

Этот ответ SO , кажется, проясняет, что shallow" отобразит все свои дочерние элементы и дочерние элементы дочерних элементов и т. д. "

    //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();
        });

    });

    //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)];
    }

Я ожидаю, что либо мелкий не отображает дочерние элементы, либо, если предполагается, что все дочерние элементы должны отображаться, чтобы дети могли правильно импортировать свои модули.Замена shallow на render приводит к той же ошибке.

Воспроизводится путем клонирования и запуска npm run test на https://github.com/nodes777/flower-game-phaser3

Answer 1

shallow отображает только детей, вы правы.Основная причина: кажется, "./components/Dashboard"; имеет код внутри, который выполняется на import - некоторый код верхнего уровня, который является выполнением, а не объявлением.

Вы можете либо изменить Dashboard, не делая этого, либо предоставить данные, необходимые для работы, либо явно смоделировать их в каждом отдельном тесте, который может импортировать их прямо или косвенно:

App.test.js:

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

Если вы выберете более поздний подход, вы можете рассмотреть возможность автоматического блокирования, создав components/Dashboard/__mocks__/index.jsx (или как имя файла в Dashboard), но остерегайтесь ошибки в jest , которая запрещаетВы используете автомок для более чем одного index.js независимо от того, находятся ли они в разных папках