Reactjs JavaScript中return语句中的Destructure变量

我正在用Jest和React测试库编写测试。我在网上遇到了这样一个代码，以后我会调用我的每个测试来加载变量

const setup = () => {
    const component = render(<Form getApi={getApi} />);
    const submitButton = screen.getByRole('button', { name: 'send' });
    const inputField = screen.getByRole('textbox');

    return {
        input,
        submitBtn,
        ...component
    }
}

const setup=（）=>{
const component=render（）；
const submitButton=screen.getByRole（'button'，{name:'send'}）；
const inputField=screen.getByRole（'textbox'）；
返回{
输入，
提交，
…组件
}
}

我的问题是：为什么组件在return语句中被分解？我应该如何在测试中导入它？ 例如：

描述（“”，（）=>{
测试（'应呈现登录字段和密码字段'，（）=>{
设置（）；
});

当他们都使用

..

时，实际上这是一个，而不是。它将

组件的一个浅拷贝

复制到一个新对象中。因此

组件

对象上的所有属性现在也将是新对象上的属性。这与以下操作类似：

const newObj = { 
  input,
  submitBtn,
}
newObj.queryByLabelText = component.queryByLabelText;
newObj.getByLabelText = component.getByLabelText;
// ... etc for all properties
return newObj

或：

---

您将这样使用它：

test('should render login field and password field', () => {
  const value = setup();
  // do stuff with value.input, value.submitBtn, value.queryByLabelText, value.getByLabelText, etc
});

或：

---

虽然它们都使用

…

，但实际上这是，而不是。它将

组件的一个浅拷贝

复制到一个新对象中。因此

组件

对象上的所有属性现在也将是新对象上的属性。这类似于：

const newObj = { 
  input,
  submitBtn,
}
newObj.queryByLabelText = component.queryByLabelText;
newObj.getByLabelText = component.getByLabelText;
// ... etc for all properties
return newObj

或：

---

您将这样使用它：

test('should render login field and password field', () => {
  const value = setup();
  // do stuff with value.input, value.submitBtn, value.queryByLabelText, value.getByLabelText, etc
});

或：

---

这里没有解构，它是一个标准的对象文本。这里没有解构，它是一个标准的对象文本。

test('should render login field and password field', () => {
  const { input, submitBtn, queryByLabelText, getByLabelText } = setup();
  // etc
});