@sigi/react/es2015/__tests__/ssr.client.spec.js

React bindings for sigi framework

import { jsx as _jsx } from "react/jsx-runtime";
import '@abraham/reflection';
import { GLOBAL_KEY_SYMBOL, RETRY_KEY_SYMBOL } from '@sigi/core';
import { Injector } from '@sigi/di';
import { useEffect } from 'react';
import { render, act } from '@testing-library/react';
import { SSRContext, useModule } from '../index.browser';
import { CountModule, ServiceModule, Service } from './__fixtures__';
const ComponentWithSelector = () => {
    const [state, actions] = useModule(CountModule, {
        selector: (s) => ({
            count: s.count + 1,
        }),
    });
    useEffect(() => {
        actions.setName('new name');
    }, [actions]);
    return _jsx("span", { children: state.count });
};
const MODULES = [CountModule, ServiceModule, Service];
describe('client ssr hydration', () => {
    it('should restore state from global with selector', () => {
        var _a;
        global[GLOBAL_KEY_SYMBOL] = {
            CountModule: {
                count: 10,
                name: '',
            },
        };
        const testRenderer = render(_jsx(SSRContext, { value: new Injector().addProviders(MODULES), children: _jsx(ComponentWithSelector, {}) }));
        expect((_a = testRenderer.baseElement.querySelector('span')) === null || _a === void 0 ? void 0 : _a.textContent).toBe('11');
        delete global[GLOBAL_KEY_SYMBOL];
        testRenderer.unmount();
    });
    it('should not restore state from global if state is null', () => {
        var _a;
        global[GLOBAL_KEY_SYMBOL] = {
            OtherModule: {
                count: 10,
                name: '',
            },
        };
        const injector = new Injector().addProviders(MODULES);
        const testRenderer = render(_jsx(SSRContext, { value: injector, children: _jsx(ComponentWithSelector, {}) }));
        act(() => {
            testRenderer.rerender(_jsx(SSRContext, { value: injector, children: _jsx(ComponentWithSelector, {}) }));
        });
        expect((_a = testRenderer.baseElement.querySelector('span')) === null || _a === void 0 ? void 0 : _a.textContent).toBe('1');
        delete global[GLOBAL_KEY_SYMBOL];
        testRenderer.unmount();
    });
    it('should restore and skip first action on client side', () => {
        var _a;
        const Component = () => {
            const [state, actions] = useModule(CountModule);
            useEffect(() => {
                actions.getCount();
            }, [actions]);
            return _jsx("span", { children: state.count });
        };
        global[GLOBAL_KEY_SYMBOL] = {
            CountModule: {
                count: 2,
                name: '',
            },
        };
        const injector = new Injector().addProviders(MODULES);
        const testRenderer = render(_jsx(SSRContext, { value: injector, children: _jsx(Component, {}) }));
        act(() => {
            testRenderer.rerender(_jsx(SSRContext, { value: injector, children: _jsx(Component, {}) }));
        });
        expect((_a = testRenderer.baseElement.querySelector('span')) === null || _a === void 0 ? void 0 : _a.textContent).toBe('2');
        delete global[GLOBAL_KEY_SYMBOL];
        testRenderer.unmount();
    });
    it('should retry action if needed on client side', () => {
        var _a;
        const Component = () => {
            const [state, dispatcher] = useModule(ServiceModule);
            useEffect(() => {
                dispatcher.setNameWithFailure(void 0);
            }, [dispatcher]);
            return _jsx("span", { children: state.name });
        };
        global[RETRY_KEY_SYMBOL] = {
            ServiceModule: ['setNameWithFailure'],
        };
        const injector = new Injector().addProviders(MODULES);
        const testRenderer = render(_jsx(SSRContext, { value: injector, children: _jsx(Component, {}) }));
        act(() => {
            testRenderer.rerender(_jsx(SSRContext, { value: injector, children: _jsx(Component, {}) }));
        });
        expect((_a = testRenderer.baseElement.querySelector('span')) === null || _a === void 0 ? void 0 : _a.textContent).toBe('From retry');
        delete global[GLOBAL_KEY_SYMBOL];
        testRenderer.unmount();
    });
});
//# sourceMappingURL=ssr.client.spec.js.map