After added dynamic columns test case is failed

Question

I am new to testing-library. First test case is fail because I have dynamically added radio or check base on mode. Previously this test case in pass. After I have added extra column, test case is fail. How can I change to pass the test.

      <td>
         <input
          class="input-selection"
           type="radio"
        />
       </td>  

if I comment it out this line, test is passed.

expect(container.firstChild).toMatchSnapshot();

import React from 'react';
import Table from './Table';
import { render, cleanup, fireEvent } from '@testing-library/react';

describe('<Table/>', () => {
  const headerLabels = [
    'Claim Number',
    'Date of Admission',
    'Date of Discharge',
    'Clinic/Hospital'
  ];
  const dataRows = [
    ['test-id', '12-03-2021', '26-03-2021', 'PARKWAY EAST'],
    ['CBGDC21000386-00', '13-03-2021', '25-03-2021', 'RESTRUCTURED HOSPITAL'],
    ['CBGDC21000386-00', '14-03-2021', '24-03-2021', 'PARKWAY EAST'],
    ['CBGDC21000386-00', '15-03-2021', '23-03-2021', 'SUNWAY'],
    ['CBGDC21000386-00', '16-03-2021', '22-03-2021', 'KEPPAL'],
    ['CBGDC21000386-00', '17-03-2021', '21-03-2021', 'PARKWAY EAST'],
    ['CBGDC21000386-00', '18-03-2021', '20-03-2021', 'PARKWAY EAST']
  ];
  afterEach(cleanup);

  it('Should render basic component', () => {
    const { container } = render(
      <Table
        headerLabels={headerLabels}
        dataRows={dataRows}
        mode="single"
        title="test title"
      />
    );
    expect(container.firstChild).toMatchSnapshot();
  });

  it('should invoke onChange callback', () => {
    const onChange = jest.fn();
    const { getByText } = render(
      <Table
        headerLabels={headerLabels}
        dataRows={dataRows}
        mode="single"
        title="test title"
        onChange={onChange}
      />
    );
    fireEvent.click(getByText('test-id'));
    expect(onChange).toHaveBeenCalled();
  });
});

Answer 1

why are you deleting previous generated snapshot file. If you want your newly UI changes then instead of deleting snapshot file Run command npm test -u

This will accept your new changes and override with old one. No need to delete snapshot file.