reactjs - Mocka sammansatta komponenter med Jest

Jag har en sammansatt komponent som ser ut så här:

export const Layout = Object.assign(Main, {
    Top, Content, Center, Left, Right,
})

Det finns ett objekt som tilldelar Main till några andra komponenter så att man kan använda punktnotation. Nedan kan du se hur jag försöker mocka det inuti jest.setup.js-filen:

jest.mock(
    '~/layouts/Layout', () => ({
        __esModule: true,
        default: (props) => {
            return <mock-layout>{props.children}</mock-layout>
        },
    }),
)

Att köra jest --ci kommer att returnera ett fel med meddelandet Kan inte läsa egenskaper av undefined (läser 'Top')

I detta ämne hittade jag ett sätt att göra något liknande detta:

const component = (props) => <layout-mock>{props.children}</layout-mock>;
component.Top = (props) => <layout-mock-top>{props.children}</layout-mock-top>;

jest.mock(
    '~/layouts/Layout', () => ({
        __esModule: true,
        default: component,
    }),
)

Men det ger mig samma fel. Hur skulle jag kunna mocka det på rätt sätt? Har du några idéer?

Svar #1

Du kommer att behöva uppdatera variabelnamnet till mockVariable för att detta ska fungera för att arbeta runt felet med variabler utanför räckvidd. Detaljer här: https://jestjs.io/docs/es6-class-mocks#calling-jestmock-with-the-module-factory-parameter