test: add package-version change mechanic

packages/react-ui-smoke-test/cra-template-react-ui/template/src/index.tsx

@@ -1,13 +1,30 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
+import React, {StrictMode} from 'react';
+import { render } from 'react-dom';
 
 import { App } from './App';
 import * as serviceWorker from './serviceWorker';
 
 const container = document.getElementById('root');
+
+let strictMode = false;
+if (process.env.STRICT_MODE === "true") {
+  strictMode = true;
+}
+
+function StrictModeWrapper(props: {children: React.ReactElement}) {
+  return strictMode
+    ? <StrictMode>
+      {props.children}
+    </StrictMode>
+    : props.children
+}
+
 if (container) {
-  const root = createRoot(container);
-  root.render(<App />);
+  render(
+    <StrictModeWrapper>
+      <App />
+    </StrictModeWrapper>,
+    container);
 }
 
 // If you want your app to work offline and load faster, you can change

packages/react-ui-smoke-test/smoke.test.ts

@@ -51,14 +51,14 @@ describe('React-ui smoke test', () => {
       serveProcess = serveApplication(appDirectory);
       await openPageOnBrowser(screenshotPath);
 
-      expect(console.error).not.toBeCalled();
+      expect(console.error).not.toHaveBeenCalled();
     },
     TIMEOUT,
   );
 
   it('Render all controls and validations on server side (SSR)', async () => {
     execSync(`yarn install && yarn server`, { stdio: 'inherit', cwd: path.join(__dirname, 'react-ui-ssr') });
-    expect(console.error).not.toBeCalled();
+    expect(console.error).not.toHaveBeenCalled();
   });
 });
 

packages/react-ui-testing/TestPages/src/ReactTestApplication.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { StrictMode } from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 
 import Layout from './components/Layout';
@@ -30,43 +30,56 @@ let SidePageTestPage;
 if (process.env.hasSidePage) SidePageTestPage = require('./components/TestPages/SidePageTestPage').default;
 else SidePageTestPage = () => <div>Does not work</div>;
 
+let strictMode = false;
+if (process.env.strictMode === "true") strictMode = true;
+
 import './styles/reset.less';
 import './styles/typography.less';
 import AutocompleteTestPage from './components/TestPages/AutocompleteTestPage';
 import ToastTestPage from './components/TestPages/ToastTestPage';
 import ToggleTestPage from './components/TestPages/ToggleTestPage';
 import SwitcherTestPage from './components/TestPages/SwitcherTestPage';
 
+function StrictModeWrapper(props) {
+  return strictMode
+    ? <StrictMode>
+      {props.children}
+    </StrictMode>
+    : props.children
+}
+
 // eslint-disable-next-line import/no-default-export
 export default function ReactTestApplication() {
   return (
-    <Router basename={process.env.baseUrl}>
-      <Layout>
-        <Routes>
-          <Route path="TestPage" element={<TestPage />} />
-          <Route path="Input" element={<InputTestPage />} />
-          <Route path="/Lists" element={<ListsTestPage />} />
-          <Route path="/Modals" element={<ModalsTestPage />} />
-          <Route path="/ComboBoxes" element={<ComboBoxTestPage />} />
-          <Route path="/Select" element={<SelectTestPage />} />
-          <Route path="/DatePicker" element={<DatePickerTestPage />} />
-          <Route path="/Button" element={<ButtonTestPage />} />
-          <Route path="/CheckBox" element={<CheckBoxTestPage />} />
-          <Route path="/Link" element={<LinkTestPage />} />
-          <Route path="/RadioGroup" element={<RadioGroupTestPage />} />
-          <Route path="/Radio" element={<RadioTestPage />} />
-          <Route path="/Textarea" element={<TextAreaTestPage />} />
-          <Route path="/Tooltip" element={<TooltipTestPage />} />
-          <Route path="/ExposeTidToDom" element={<ExposeTidToDomTestPage />} />
-          <Route path="/Kebab" element={<KebabTestPage />} />
-          <Route path="/Paging" element={<PagingTestPage />} />
-          <Route path="/SidePage" element={<SidePageTestPage />} />
-          <Route path="/Autocomplete" element={<AutocompleteTestPage />} />
-          <Route path="/Toast" element={<ToastTestPage />} />
-          <Route path="/Toggle" element={<ToggleTestPage />} />
-          <Route path="/Switcher" element={<SwitcherTestPage />} />
-        </Routes>
-      </Layout>
-    </Router>
+    <StrictModeWrapper>
+      <Router basename={process.env.baseUrl}>
+        <Layout>
+          <Routes>
+            <Route path="TestPage" element={<TestPage />} />
+            <Route path="Input" element={<InputTestPage />} />
+            <Route path="/Lists" element={<ListsTestPage />} />
+            <Route path="/Modals" element={<ModalsTestPage />} />
+            <Route path="/ComboBoxes" element={<ComboBoxTestPage />} />
+            <Route path="/Select" element={<SelectTestPage />} />
+            <Route path="/DatePicker" element={<DatePickerTestPage />} />
+            <Route path="/Button" element={<ButtonTestPage />} />
+            <Route path="/CheckBox" element={<CheckBoxTestPage />} />
+            <Route path="/Link" element={<LinkTestPage />} />
+            <Route path="/RadioGroup" element={<RadioGroupTestPage />} />
+            <Route path="/Radio" element={<RadioTestPage />} />
+            <Route path="/Textarea" element={<TextAreaTestPage />} />
+            <Route path="/Tooltip" element={<TooltipTestPage />} />
+            <Route path="/ExposeTidToDom" element={<ExposeTidToDomTestPage />} />
+            <Route path="/Kebab" element={<KebabTestPage />} />
+            <Route path="/Paging" element={<PagingTestPage />} />
+            <Route path="/SidePage" element={<SidePageTestPage />} />
+            <Route path="/Autocomplete" element={<AutocompleteTestPage />} />
+            <Route path="/Toast" element={<ToastTestPage />} />
+            <Route path="/Toggle" element={<ToggleTestPage />} />
+            <Route path="/Switcher" element={<SwitcherTestPage />} />
+          </Routes>
+        </Layout>
+      </Router>
+    </StrictModeWrapper>
   );
 }

packages/react-ui-testing/TestPages/versions.js

@@ -1,13 +1,14 @@
 const shell = require('shelljs');
 const semver = require('semver');
 const reactUiLocalVersionStub = '9.9.9';
+let reactVersion;
 
 const versionsInfo = [
   {
-    react: '17.0.2',
+    react: reactVersion ?? '17.0.2',
     '@skbkontur/react-ui': [reactUiLocalVersionStub],
     dependencies: {
-      'react-dom': '17.0.2',
+      'react-dom': reactVersion ?? '17.0.2',
     },
   },
 ];

packages/react-ui-testing/TestPages/webpack.config.js

@@ -83,6 +83,7 @@ function createConfig(reactVersion, reactUIVersion) {
         'process.env.newCombobox': JSON.stringify(semver.satisfies(reactUIVersion, '>=0.7.0')),
         'process.env.reactUIVersion': JSON.stringify(reactUIVersion),
         'process.env.baseUrl': JSON.stringify(`/${reactVersion}/${reactUIVersion}`),
+        'process.env.strictMode': process.env.STRICT_MODE,
       }),
       new HtmlWebpackPlugin({
         filename: `${reactVersion}/${reactUIVersion}/index.html`,

packages/react-ui-validations/.storybook/main.ts

@@ -8,7 +8,7 @@ const config: StorybookConfig = {
     name: '@storybook/react-webpack5',
     options: {
       fastRefresh: !isTestEnv,
-      strictMode: true,
+      strictMode: process?.env?.STRICT_MODE === 'true',
     },
   },
   core: {

packages/react-ui-validations/package.json

@@ -75,10 +75,10 @@
     "@skbkontur/storybook-addon-live-examples": "0.0.17",
     "@storybook/addon-a11y": "7.6.18",
     "@storybook/addon-controls": "7.6.18",
+    "@storybook/addon-docs": "7.6.18",
     "@storybook/addon-essentials": "7.6.18",
     "@storybook/addon-interactions": "^7.6.18",
     "@storybook/addon-links": "7.6.18",
-    "@storybook/addon-docs": "7.6.18",
     "@storybook/blocks": "7.6.18",
     "@storybook/react": "7.6.18",
     "@storybook/react-webpack5": "7.6.18",

packages/react-ui-validations/tests/test-setup.js

@@ -1,7 +1,7 @@
 import { configure } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
-configure({ testIdAttribute: 'data-tid' });
+configure({ testIdAttribute: 'data-tid', reactStrictMode: process?.env?.STRICT_MODE === 'true' });
 
 jest.mock('../src/smoothScrollIntoView', () => {
   const originalModule = jest.requireActual('../src/smoothScrollIntoView');

packages/react-ui/.storybook/config-stories.ts

@@ -19,9 +19,8 @@ const config: StorybookConfig = {
   framework: {
     name: '@storybook/react-webpack5',
     options: {
-      legacyRootApi: true,
       fastRefresh: true,
-      strictMode: true,
+      strictMode: process?.env?.STRICT_MODE === 'true',
     },
   },
   core: {

packages/react-ui/.storybook/preview.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { StrictMode } from 'react';
 import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { Preview } from '@storybook/react';
 import { addons } from '@storybook/manager-api';

packages/react-ui/package.json

@@ -151,8 +151,8 @@
     "selenium-webdriver": "^4.27.0",
     "semver": "^7.6.2",
     "serve": "^13.0.2",
-    "string-replace-loader": "3.1.0",
     "storybook": "7.6.18",
+    "string-replace-loader": "3.1.0",
     "style-loader": "^4.0.0",
     "stylelint": "^16.6.0",
     "stylelint-config-standard": "^36.0.0",

packages/react-ui/test-setup.js

@@ -9,6 +9,7 @@ Enzyme.configure({ adapter: new Adapter() });
 
 configure({
   testIdAttribute: 'data-tid',
+  reactStrictMode: process?.env?.STRICT_MODE === 'true',
 });
 
 jest.mock('react-focus-lock', () => (props) => <div>{props.children}</div>);