src/Table.test.js

import React from 'react';
import {render} from '@testing-library/react';
import ReactTable from 'react-table';

import Table from './Table';

/** @test {Table} */
it('can render a table', () => {
  const data = [{bar: 1, baz: 2}];
  const {container} = render(
    <Table tableName={'foo'} columns={['bar', 'baz']} data={data} />
  );

  // Check that the ReactTable is rendered and contains the data
  expect(container.querySelector('.ReactTable')).toBeInTheDocument();
  expect(container).toHaveTextContent('bar');
  expect(container).toHaveTextContent('baz');
  expect(container).toHaveTextContent('1');
  expect(container).toHaveTextContent('2');

  // Check that sorting is enabled by default (sortable columns have sort indicators)
  const columnHeaders = container.querySelectorAll('.rt-th');
  expect(columnHeaders.length).toBeGreaterThan(0);
});

/** @test {Table} */
it('can disable sorting', () => {
  const {container} = render(
    <Table
      tableName={'foo'}
      columns={['test']}
      data={[{test: 'value'}]}
      sortable={false}
    />
  );

  // Check that the table is rendered
  expect(container.querySelector('.ReactTable')).toBeInTheDocument();

  // When sortable is false, the ReactTable should not have sortable styling
  // We can check this by verifying the table renders but without checking for
  // sorting-specific classes that would only appear with sortable=true
  expect(container).toHaveTextContent('test');
  expect(container).toHaveTextContent('value');
});