chore: Fix broken toast unit test and linting issue with inline stories (#978)

Author: rfgamaral

.storybook/webpack.config.js

@@ -6,6 +6,16 @@
 // When you add this file, we won't add the default configurations which is similar
 // to "React Create App". This only has babel loader to load JavaScript.
 
+// Babel configuration for transpiling modern JS features in node_modules
+const babelConfigForNodeModules = {
+    presets: [['@babel/preset-env', { targets: { browsers: 'defaults, not IE 11' } }]],
+    plugins: [
+        '@babel/plugin-proposal-class-properties',
+        '@babel/plugin-proposal-optional-chaining',
+        '@babel/plugin-proposal-nullish-coalescing-operator',
+    ],
+}
+
 module.exports = {
     plugins: [],
     module: {
@@ -28,10 +38,16 @@ module.exports = {
                 loader: 'svg-url-loader',
             },
             {
-                test: /\.(jsx?|tsx?)$/,
-                // Exclude all node_modules from transpilation, except for Ariakit dependencies
-                exclude: /node_modules\/(?!(ariakit.*)\/).*/,
-                use: [{ loader: 'babel-loader' }],
+                test: /\.(m?jsx?|tsx?)$/,
+                // Exclude all node_modules from transpilation, except for Ariakit and Storybook testing libraries
+                exclude: /node_modules\/(?!(ariakit.*|@storybook\/expect|@storybook\/jest|@adobe\/css-tools|@testing-library\/jest-dom)\/).*/,
+                use: [{ loader: 'babel-loader', options: babelConfigForNodeModules }],
+            },
+            {
+                test: /\.mjs$/,
+                include: /node_modules/,
+                type: 'javascript/auto',
+                use: [{ loader: 'babel-loader', options: babelConfigForNodeModules }],
             },
         ],
     },

package-lock.json

@@ -49,7 +49,7 @@
         "poststart:yalc": "yalc installations clean",
         "start:yalc:success": "./scripts/organize-styles.sh && yalc push --sig",
         "build": "scripts/build.sh",
-        "build:storybook": "NODE_OPTIONS=--openssl-legacy-provider build-storybook -o docs",
+        "build:storybook": "build-storybook -o docs",
         "clean": "rimraf es lib styles dist",
         "test": "jest --passWithNoTests",
         "test:watch": "npm run test -- --watch",
@@ -71,7 +71,9 @@
         "@babel/plugin-proposal-class-properties": "^7.10.1",
         "@babel/plugin-proposal-export-default-from": "^7.0.0",
         "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
         "@babel/plugin-proposal-object-rest-spread": "^7.10.1",
+        "@babel/plugin-proposal-optional-chaining": "7.21.0",
         "@babel/plugin-transform-spread": "^7.0.0",
         "@babel/polyfill": "^7.0.0",
         "@babel/preset-env": "^7.0.0",

package.json

@@ -88,13 +88,11 @@ ResponsiveStory.argTypes = {
 export function NestedStackStory({ space }: PartialProps<typeof Inline>) {
     const spaceStr = typeof space !== 'string' ? 'none' : space
     return (
-        <>
-            <Stack space={space}>
-                <Heading level="1">Parent stack with space=&ldquo;{spaceStr}&rdquo;</Heading>
-                <Inline space="xsmall">{renderInlineContent()}</Inline>
-                <Inline space="xsmall">{renderInlineContent()}</Inline>
-            </Stack>
-        </>
+        <Stack space={space}>
+            <Heading level="1">Parent stack with space=&ldquo;{spaceStr}&rdquo;</Heading>
+            <Inline space="xsmall">{renderInlineContent()}</Inline>
+            <Inline space="xsmall">{renderInlineContent()}</Inline>
+        </Stack>
     )
 }
 

src/inline/inline.stories.tsx

@@ -370,7 +370,9 @@ describe('Toast', () => {
         )
         expect(screen.queryByRole('alert')).not.toBeInTheDocument()
         userEvent.click(screen.getByRole('button', { name: 'Toggle' }))
-        expect(screen.getByRole('alert')).toHaveTextContent('A toast that can be toggled')
+        await waitFor(() => {
+            expect(screen.getByRole('alert')).toHaveTextContent('A toast that can be toggled')
+        })
         userEvent.click(screen.getByRole('button', { name: 'Toggle' }))
         await waitFor(() => {
             expect(screen.queryByRole('alert')).not.toBeInTheDocument()