Issue with TableView component not rendering data in test

[NicolasDiCostanzo]

Hello,

I'm experiencing an issue with the TableView component. The component does not seem to render the data as expected in my test environment, although it works fine in a regular browser environment.

Issue Description

When using the TableView component, the data rows are not rendered in the test output. However, if I replace the TableView with a simple div-based structure, the data renders correctly. This suggests that there might be an issue with how TableView is being used or how it interacts with the test environment.

Test setup:

import React from 'react';
import { render, screen } from '@testing-library/react';
import { BrowserRouter } from 'react-router';
import { Provider, defaultTheme } from '@adobe/react-spectrum';
import { IUser } from 'sharedtypes';
import { AnalyticsTable } from './AnalyticsTable';

const mockNavigate = vi.fn();
vi.mock('react-router', () => ({
    ...vi.importActual('react-router'),
    useNavigate: () => mockNavigate,
    BrowserRouter: ({ children }: { children: React.ReactNode }) => <div data-testid="browser-router">{children}</div>,
}));

const Wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
    <BrowserRouter>
        <Provider theme={defaultTheme}>
            {children}
        </Provider>
    </BrowserRouter>
);

const mockUsers: IUser[] = [
    {
        _id: '1',
        email: '[email protected]',
        premium_level: 'none',
        admin: false,
        blockedAt: new Date('2047-05-01T12:00:00.000Z'),
        name: 'User One',
    }
];

const mockMakeAdmin = vi.fn();
const mockUpdateBlockedAt = vi.fn();

const defaultProps = {
    users: mockUsers,
    makeAdmin: mockMakeAdmin,
    updateBlockedAt: mockUpdateBlockedAt,
};

describe('AnalyticsTable', () => {
    describe('Data Display Consistency', () => {
        describe('renders users data correctly', () => {
            test('emails', () => {
                render(
                    <Wrapper>
                        <AnalyticsTable {...defaultProps} />
                    </Wrapper>
                );

                expect(screen.getByText('[email protected]')).toBeInTheDocument();
            });
        });
    });
});

Code That Works

Here is a simplified version of the component using div elements that works as expected:

return (
  <div>
    <div>
      {users.map((user) => (
        <div key={user._id} style={{ display: 'flex', justifyContent: 'space-between', padding: '10px', borderBottom: '1px solid #ccc' }}>
          <span>{user.email}</span>
          <span>{user.premium_level}</span>
          <span>{user.admin ? 'Yes' : 'No'}</span>
        </div>
      ))}
    </div>
  </div>
);

Code That Doesn't Work

Here is a simplified version of my component using the TableView component that does not render the data in the test environment:

return (
  <TableView aria-label="Users Table">
    <TableHeader>
      <Column key="email">Email</Column>
      <Column key="premium_level">Premium Level</Column>
      <Column key="admin">Admin</Column>
    </TableHeader>
    <TableBody>
      {users.map((user) => (
        <Row key={user._id}>
          <Cell>{user.email}</Cell>
          <Cell>{user.premium_level}</Cell>
          <Cell>{user.admin ? 'Yes' : 'No'}</Cell>
        </Row>
      ))}
    </TableBody>
  </TableView>
);

And here is the actual component I'm trying to test, which obviously doesn't work neither:

import React, { FC, JSX } from 'react';
import {
    Flex, TableView, TableHeader, TableBody,
    Column, Row, Cell, ToggleButton, IllustratedMessage, Heading, Content,
    ActionButton, Text
} from '@adobe/react-spectrum';
import { useNavigate } from 'react-router';
import NotFound from '@spectrum-icons/illustrations/NotFound';
import { IUser } from 'sharedtypes';

import { ORANGE_MEDIUM } from '~/Utils/color';

interface AnalyticsTableProps {
    users: IUser[];
    makeAdmin: (u: IUser) => void;
    updateBlockedAt?: (u: IUser, date: string | null) => void;
}

function renderEmptyState() {
    return (
        <IllustratedMessage>
            <NotFound />
            <Heading>No results</Heading>
            <Content>No results found</Content>
        </IllustratedMessage>
    );
}

export const AnalyticsTable: FC<AnalyticsTableProps> = ({
    users, makeAdmin, updateBlockedAt
}) => {
    const navigate = useNavigate();
    const columns = [
        { name: 'Email', uid: 'email' },
        { name: 'Premium Level', uid: 'premium_level' },
        { name: 'Admin', uid: 'admin' },
        { name: 'Blocked At', uid: 'blockedAt' },
    ];

    const redirectToProfile = (user: IUser) => {
        navigate(`user/${user._id}`, {
            state: user
        });
    };

    const formatDate = (dateString?: string) => {
        if (!dateString) { return 'null'; }
        try {
            return new Date(dateString).toLocaleDateString();
        } catch {
            return dateString;
        }
    };

    return (
        <Flex height="size-5000" width="100%" direction="column" gap="size-150">
            <TableView
                flex
                aria-label="Users Table"
                renderEmptyState={renderEmptyState}
                isQuiet
            >
                <TableHeader columns={columns}>
                    {(column) => (
                        <Column key={column.uid}>
                            {column.name}
                        </Column>
                    )}
                </TableHeader>
                <TableBody items={users}>
                    {(item) => (
                        <Row key={item.email}>
                            {(key) => {
                                const renderers: Record<string, () => JSX.Element> = {
                                    admin: () => {
                                        const isAdmin = item.admin.toString() === 'true';
                                        return (
                                            <Cell>
                                                <ToggleButton
                                                    isEmphasized={isAdmin}
                                                    onPress={() => makeAdmin(item)}
                                                    isSelected={isAdmin}
                                                >
                                                    {item[key]}
                                                </ToggleButton>
                                            </Cell>
                                        );
                                    },
                                    email: () => (
                                        <Cell>
                                            <ActionButton
                                                isQuiet
                                                onPress={() => redirectToProfile(item)}
                                            >
                                                <Text
                                                    UNSAFE_style={{
                                                        color: ORANGE_MEDIUM,
                                                        textDecoration: 'underline',
                                                    }}
                                                >
                                                    {item.email}
                                                </Text>
                                            </ActionButton>
                                        </Cell>
                                    ),
                                    blockedAt: () => (
                                        <Cell>
                                            <Flex direction="row" gap="size-100" alignItems="center">
                                                <Text>{formatDate(item.blockedAt)}</Text>
                                                {updateBlockedAt && (
                                                    <ToggleButton
                                                        isEmphasized={!!item.blockedAt}
                                                        onPress={() => {
                                                            if (item.blockedAt) {
                                                                updateBlockedAt(item, null);
                                                            } else {
                                                                const blockDate = new Date(2020, 0, 1);
                                                                updateBlockedAt(item, blockDate.toISOString());
                                                            }
                                                        }}
                                                        isSelected={!!item.blockedAt}
                                                    >
                                                        {item.blockedAt ? 'Unblock' : 'Block'}
                                                    </ToggleButton>
                                                )}
                                            </Flex>
                                        </Cell>
                                    ),
                                    premium_level: () => {
                                        const isBoosterLevel = item[key] === 'booster';
                                        return (
                                            <Cell>
                                                {isBoosterLevel ? 'Core' : item[key]}
                                            </Cell>
                                        );
                                    },
                                };

                                // Default renderer for keys not explicitly handled
                                return renderers[key]?.() || <Cell>{item[key]}</Cell>;
                            }}
                        </Row>
                    )}
                </TableBody>
            </TableView>
        </Flex>
    );
};

Any insights or suggestions on how to resolve this issue would be greatly appreciated. Thank you!

[reidbarber]

Have you seen this section of the docs? https://react-spectrum.adobe.com/react-spectrum/testing.html#virtualized-components

Also we provide some utilities to make testing easier: https://react-spectrum.adobe.com/react-spectrum/TableView.html#testing