reactjs - 如何使用 React 测试库测试来自 React Redux 的 Field 组件？

Question

这是我的领域：

<Field
 name="postcode"
 label="Postcode"
 nonReduxFormInputProps={{ id: 'postcode' }}
 component={TextInput}
 />

在我的测试中，到目前为止我已经这样做并且它通过了，但我认为这是错误的，因为对于名称，代码中的“邮政编码”以小写字母开头，但在我的测试中，它只有在名称带有大写字母时才通过P'。我也不知道如何测试标签、nonReduxFormInputProps 和组件。

describe('postcode field', () => {
  it('should render a Field component with correct props', () => {
    render(<TestForm />);
    expect(screen.getByRole('textbox', { name: 'Postcode' })).toBeInTheDocument();

Answer 1

{ name: 'Postcode' }查询匹配标签属性，而不是名称属性。这是文档所说的：

您可以通过其可访问的名称查询返回的元素。可访问名称用于简单情况，例如表单元素的标签、按钮的文本内容或 aria-label 属性的值。

您可以在此处查看详细信息：https ://testing-library.com/docs/queries/byrole