Fix accordion ssr

.changeset/breezy-snails-rhyme.md

@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-accordion': patch
+---
+
+Исправление SSR

jest.config.js

@@ -1,9 +1,7 @@
 const ignoredModules = ['simplebar'];
 
-module.exports = {
+const baseConfig = {
     preset: 'ts-jest/presets/js-with-ts',
-    testEnvironment: 'jest-environment-jsdom-sixteen',
-    setupFilesAfterEnv: ['./packages/setupTests.ts'],
     modulePathIgnorePatterns: ['dist'],
     globalSetup: './packages/globalSetup.ts',
     globals: {
@@ -21,9 +19,26 @@ module.exports = {
         '@alfalab/core-components-(.*)$': '<rootDir>/packages/$1/src',
         '\\.css$': 'identity-obj-proxy',
     },
-    testMatch: ['**/*.test.ts?(x)', '!**/*.screenshots.test.ts?(x)'],
     testPathIgnorePatterns: ['codemod'],
     transformIgnorePatterns: [`node_modules/(?!${ignoredModules.join('|')})`],
-    coverageReporters: ['lcov', 'text', 'text-summary', 'clover'],
-    coveragePathIgnorePatterns: ['index.ts'],
+}
+
+module.exports = {
+    projects: [
+        {
+            ...baseConfig,
+            displayName: 'csr', /* client side rendering */
+            testEnvironment: 'jest-environment-jsdom-sixteen',
+            setupFilesAfterEnv: ['./packages/setupTests.ts'],
+            testMatch: ['**/*.test.ts?(x)', '!**/*.(screenshots|ssr).test.ts?(x)'],
+            coveragePathIgnorePatterns: ['index.ts'],
+            coverageReporters: ['lcov', 'text', 'text-summary', 'clover'],
+        },
+        {
+            ...baseConfig,
+            displayName: 'ssr', /* server side rendering */
+            testEnvironment: 'node',
+            testMatch: ['**/*.ssr.test.ts?(x)'],
+        }
+    ],
 };

package.json

@@ -27,7 +27,7 @@
         "lint:css": "stylelint ./packages/**/*.css",
         "lint:js": "eslint ./packages --ext .ts,.tsx,.js,.jsx --max-warnings 0",
         "lint:deps": "node ./bin/lint-deps.js",
-        "test": "jest --watchAll=false --env=jsdom-sixteen",
+        "test": "jest --watchAll=false",
         "test:screenshots": "./bin/run-screenshots.sh",
         "test:codemod": "jest --config=jest.codemod.config.js packages/codemod/",
         "format": "prettier --write \"./{packages,bin}/**/*.{ts,tsx,js,jsx,css,json}\"",

packages/accordion/src/Component.ssr.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+
+import { Accordion } from '.';
+
+test('Accordion', () => {
+    let htmlString: string | undefined;
+
+    expect(() => {
+        htmlString = renderToString(<Accordion header={null} />);
+    }).not.toThrow();
+
+    expect(htmlString).toEqual(expect.any(String));
+});

packages/accordion/src/Component.test.tsx

@@ -1,21 +1,8 @@
 import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
+import { render } from '@testing-library/react';
 
 import { Accordion, AccordionProps } from '.';
 
-const control = (
-    <div
-        style={{
-            backgroundColor: 'rgba(55, 120, 251, 0.1)',
-            border: '1px dashed rgb(55, 120, 251)',
-            boxSizing: 'border-box',
-            borderRadius: '8px',
-            height: '24px',
-            width: '24px',
-        }}
-    />
-);
-
 const renderComponent = (props: Partial<AccordionProps> = {}) =>
     render(
         <Accordion header='Зачем нужен аккордион?' {...props}>

packages/accordion/src/hooks/useMeasureHeight.ts

@@ -1,6 +1,8 @@
 import { Ref, useEffect, useRef, useState } from 'react';
 import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';
 
+import { fnUtils, isClient } from '@alfalab/core-components-shared';
+
 function createUseMeasureHook<T extends HTMLElement, U>(
     measure: (element: T) => U,
 ): () => [U | undefined, Ref<T>];
@@ -17,7 +19,7 @@ function createUseMeasureHook<T extends HTMLElement, U>(
         const [measurement, setMeasurement] = useState(initial);
         const resizeObserver = useRef<ResizeObserver | null>(null);
 
-        if (!resizeObserver.current) {
+        if (isClient() && !resizeObserver.current) {
             const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
 
             resizeObserver.current = new ResizeObserver(([{ target }]) => {
@@ -26,15 +28,13 @@ function createUseMeasureHook<T extends HTMLElement, U>(
             });
         }
 
-        // eslint-disable-next-line consistent-return
         useEffect(() => {
-            if (element) {
-                resizeObserver.current?.observe(element);
+            if (fnUtils.isNil(element)) return fnUtils.noop;
+            resizeObserver.current?.observe(element);
 
-                return () => {
-                    resizeObserver.current?.unobserve(element);
-                };
-            }
+            return () => {
+                resizeObserver.current?.unobserve(element);
+            };
         }, [element]);
 
         useEffect(() => resizeObserver.current?.disconnect(), []);

packages/accordion/tsconfig.json

@@ -9,5 +9,8 @@
             "@alfalab/core-components-*": ["../*/src"],
         }
     },
-    "references": [{ "path": "../typography" }]
+    "references": [
+        { "path": "../typography",  },
+        { "path": "../shared" }
+    ]
 }