Фермент мелкий не работает, но монтирование работает

Question

У меня есть следующий файл .jsx, который я пытаюсь протестировать:

import React, { Component } from "react";
import { SideNavigation } from "@xxx/react-components-xxx";
import { withTranslation } from "react-i18next";

class Navigation extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { t } = this.props;

        const ITEMS = [
            {
                type: "section",
                text: t("navigation.abc"),
                items: [
                    {
                        type: "link",
                        text: t("navigation.abc"),
                        href: "#/abc"
                    },
                    { type: "link", text: t("navigation.def"), href: "#/def" }
                ]
            }
        ];

        const HEADER = {
            href: "#/",
            text: t("navigation.title")
        };

        return (
            <SideNavigation
                header={HEADER}
                items={ITEMS}
            />
        );
    }
}

export default withTranslation()(Navigation);

И вот мой тестовый пример:

import React from "react";
import { shallow } from 'enzyme';
import Navigation from '../src/a';
import { SideNavigation } from '@xxx/react-components-xxx';

describe('Navigation component', () => {
    it('should render consistently', () => {
        const wrapper = shallow(
            <Navigation />
        );

        console.log(wrapper.render());
        expect(wrapper).not.toBeNull();

        const sideNav = wrapper.find(SideNavigation);
        console.log(sideNav.render());
        const sideNavProps = sideNav.props();
        console.log(sideNavProps);
    });
});

И с этим, Я получаю следующее сообщение об ошибке:

Метод «тип» предназначен для запуска на 1 узле. Вместо этого найдено 0.

  14 |
  15 |         const sideNav = wrapper.find(SideNavigation);
> 16 |         console.log(sideNav.render());
     |                             ^
  17 |         const sideNavProps = sideNav.props();
  18 |         console.log(sideNavProps);
  19 |     });

  at ShallowWrapper.single (node_modules/enzyme/src/ShallowWrapper.js:1636:13)
  at ShallowWrapper.type (node_modules/enzyme/src/ShallowWrapper.js:1372:17)
  at ShallowWrapper.render (node_modules/enzyme/src/ShallowWrapper.js:1106:17)
  at Object.<anonymous> (tst/components/Navigation.test.js:16:29)

Но если я использую mount вместо мелкого, здесь все работает нормально. Может кто-нибудь сказать, в чем здесь проблема?

Answer 1

Это из-за WithTranslation.

Они упоминают это в своих do c

Для целей тестирования вашего компонента вы должны экспортировать чистый компонент без расширения с помощью withTranslation ho c и проверьте, что:

export MyComponent;
export default withTranslation('ns')(MyComponent);

В этом тесте проверьте экспорт myComponent, передаваемый в mock функции:

import { MyComponent } from './myComponent';
<MyComponent t={key => key} />