reactjs 添加动态列后,测试用例失败

evrscar2  于 2023-02-08  发布在  React
关注(0)|答案(2)|浏览(124)

我是测试库的新手。第一个测试用例失败,因为我动态添加了无线电或基于模式的检查。以前此测试用例通过。添加额外列后,测试用例失败。我如何更改以通过测试。

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

如果我注解掉这一行,测试就通过了。
expect(容器.第一个子对象).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();
  });
});
qojgxg4l

qojgxg4l1#

为什么要删除以前生成的快照文件。如果要更改新的UI,请运行命令npm test -u,而不是删除快照文件
这将接受您的新更改并用旧更改覆盖。无需删除快照文件。

kulphzqa

kulphzqa2#

这是因为以前生成的快照文件。在我删除并运行测试后,所有测试用例都通过了。

相关问题