fix(Table): avoid rendering action buttons copy in test env (#1187)

doc/testing.md

@@ -16,6 +16,13 @@ if (process.env.NODE_ENV !== 'test') {
 Make sure your bundler (webpack, rollup, parcel, etc) makes the correct substitutions and the minifier
 effectively removes unused code.
 
+## Unit tests
+
+Unit tests usually don't require CSS because they test component functionality. Some Mistica components have
+different layouts in mobile and desktop, and there are cases in which we use CSS styles to achieve this
+result. If you are trying to test something that depends on these styles, you can either import `mistica.css`
+classes in the HTML content you render in the test or write acceptance/screenshot tests instead.
+
 ## Acceptance tests
 
 To change some behaviors to facilitate acceptance tests (tests that run in a browser), a helper function is

src/table.tsx

@@ -310,27 +310,36 @@ export const Table = React.forwardRef(
                                         hasActionsColumn && <td className={styles.actionsTableCell} />
                                     )}
 
-                                    {collapsedRowsMode && rowActionsList.length > 0 && (
-                                        <td
-                                            className={styles.topActions}
-                                            style={{
-                                                position: 'absolute',
-                                                top: `calc(${
-                                                    boxed
-                                                        ? TOP_ACTIONS_PADDING.boxed
-                                                        : TOP_ACTIONS_PADDING.default
-                                                } - ${BORDER_SIZE} + (${iconContainerSize.small} - ${
-                                                    iconSize.small
-                                                }) / 2)`,
-                                                right: boxed
-                                                    ? `calc(${TOP_ACTIONS_PADDING.boxed} - ${BORDER_SIZE})`
-                                                    : 0,
-                                                width: actionsElementWidth,
-                                            }}
-                                        >
-                                            {actions}
-                                        </td>
-                                    )}
+                                    {/**
+                                     * mistica.css styles are usually not loaded for unit tests in projects that use Mistica.
+                                     * The row's top actions are hidden by using display: none, but if mistica.css is not used,
+                                     * the buttons will be rendered twice. This can cause issues when using functions like
+                                     * queryBy/findBy, because of finding multiple buttons with the same name.
+                                     * In order to avoid this issue, we don't render the copy of actions in test environment.
+                                     */}
+                                    {process.env.NODE_ENV !== 'test' &&
+                                        collapsedRowsMode &&
+                                        rowActionsList.length > 0 && (
+                                            <td
+                                                className={styles.topActions}
+                                                style={{
+                                                    position: 'absolute',
+                                                    top: `calc(${
+                                                        boxed
+                                                            ? TOP_ACTIONS_PADDING.boxed
+                                                            : TOP_ACTIONS_PADDING.default
+                                                    } - ${BORDER_SIZE} + (${iconContainerSize.small} - ${
+                                                        iconSize.small
+                                                    }) / 2)`,
+                                                    right: boxed
+                                                        ? `calc(${TOP_ACTIONS_PADDING.boxed} - ${BORDER_SIZE})`
+                                                        : 0,
+                                                    width: actionsElementWidth,
+                                                }}
+                                            >
+                                                {actions}
+                                            </td>
+                                        )}
                                 </tr>
                             );
                         })