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

我想更改react测试库中

TextField

的值。 我已经设置了数据测试ID。然后使用

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' } })

//组件
setEmail（e.target.value）}
autoComplete=“电子邮件”
自动对焦
/>
//测试
//...
让userInput=getByTestId（'input-email'）
更改（用户输入，{target:{value:'correct@mail.com' } })

---

但这不起作用，因为它返回错误：

给定元素没有值设置器。元素不是在其
onChange
属性上使用了
e.target.value
？我做错了什么？
您可以在支持该事件的元素上使用
fireEvent.change
，如
。就你而言，我不确定你选择了什么。您可以尝试
调试（userInput）
以查看它返回什么。
这里的问题是MaterialUI中的抽象。它由表单控件、标签和输入组成。解决此问题的干净方法是：


首先，在文本字段中添加
InputProps
，使用
datatestid
属性

//YourComponent.js
setContent（event.target.value）}
id=“内容”
inputProps={{“数据测试ID”：“内容输入”}
值={content}
label=“Content”
/>


然后简单地使用这个ID进行查询

这里的问题是，当我们使用Material UI时，它会呈现文本字段组件，其中有一个元素作为输入字段。
而且只有“输入”上有getter和setter。因此，在获得TextField之后，您必须使用DOM对象的querySelector（）获取TextField的“input”元素

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

我测试了答案和评论，唯一适合我的解决方案是userEvent

首先安装依赖项
npm安装--保存dev@testing library/user事件

然后在测试文件中调用：

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

更多
回到这个答案-这是正确的，但更好的方法是
queryByLabelText
，如查询的优先级部分所述：-但这需要不同的setupupdate-而不是使用fireEvent，您可以从中使用userEvent。建议使用它，因为它提供了更高级的浏览器交互模拟。
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