Question

我想更改React测试库中material UI TextField的值。我已经设置了数据-testid。然后使用getByTestId拾取输入元素。

// the component
<TextField
  data-testid="input-email"
  variant="outlined"
  margin="normal"
  required
  fullWidth
  id="email"
  label="Email Address"
  name="email"
  value={email}
  onChange={e => setEmail(e.target.value)}
  autoComplete="email"
  autoFocus
/>
// the test 
//...
let userInput = getByTestId('input-email')
fireEvent.change(userInput, { target: { value: 'correct@mail.com' } })

，但这不起作用，因为它返回错误：The given element does not have a value setter。元素不是在其e.target.value属性上使用onChange吗？我在做什么错了？

Answer 1

这里的问题是，当我们使用Material UI时，它将呈现其中具有元素之一的 TextField组件作为输入字段。并且只有“输入”具有吸气剂和吸气剂。因此，在获取TextField之后，您可以使用DOM对象的 querySelector（）获取TextField的“ input”元素。

const field = getByTestId('input-email').querySelector('input');
// now fire your event
fireEvent.change(field, { target: { value: 'abcd@xyz.com' } });

Answer 2

这里的问题是TextField是MaterialUI中的抽象。它由FormControl，Label和Input组成。解决此问题的干净方法是：

首先，在InputProps属性的文本字段上添加data-testid。

// YourComponent.js

<TextField
  onChange={event => setContent(event.target.value)}
  id="content"
  inputProps={{ "data-testid": "content-input" }}
  value={content}
  label="Content"
/>

然后只需使用此ID即可查询。

// YourComponent.test.js

const contentInput = getByTestId("content-input");
fireEvent.change(contentInput, {
  target: { value: "new content" }
});

// and then assert stuff in here

Answer 3

您可以在支持该事件的元素上使用fireEvent.change，例如<input>。就您而言，我不确定您要选择什么。您可以尝试debug(userInput)查看返回的内容。

Answer 4

我测试了答案和评论，唯一对我有用的解决方案是 userEvent。

首先安装依赖 npm install --save-dev @testing-library/user-event

然后在您的测试文件中调用：

import { render, act } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
    
    ...
it('Awesome input test', async () => {
await act(async () => {
    const inputMessage = getByTestId('input-send-message');
    userEvent.type(inputMessage, 'My awesome text...');
  })
})
//expect goes here

更多here

React测试库：fireEvent在输入表单上更改时，给定元素没有值设置器

4 个答案: