为什么join（）不从javascript中的数组中删除空字符串？

这是一个简单的

reactjs

项目的测试用例，在本例中，我尝试针对

textContent

进行测试

container

只是一个

div

元素，它是我们的渲染目标。而

Simple

是返回react组件的函数

textContent

是字符串，但分配内存的长度和“逻辑”内存的长度彼此不同。因此，首先，我尝试使用

trim（）

，它不起作用，并且认为这很奇怪，然后我尝试了

split（）

和

join（）

，这不是最好的解决方案，但它应该已经起作用了

it（“简单测试”，函数（）{
行动（职能）{
const Simple=Template.bind（{}）；
渲染（简单（道具）、容器）；
});
let received=container.textContent.split（“”；//[“A”、“B”、“C”和“，”）]
已接收=已接收。加入（“”；/“ABC”
console.log（received.length）；//但长度仍然是5
让期望值=值[0]。名称；/“ABC”，长度为3
expect（received）.toBe（expected）；//总之，测试用例失败
});

编辑：可复制示例

两个文件位于同一目录中

//CurrencyTextField.test.js
从“React”导入React；
从“react dom”导入{render，unmountComponentAtNode}；
从“react dom/test utils”导入{act}；
从“/CurrencyTextField”导入CurrencyTextField；
让container=null；
让模板；
让货币自由流通；
让道具；
beforeach（函数（）{
容器=document.createElement（“div”）；
文件.正文.附件（容器）；
道具={
货币，
活期：货币[0]，
handleValueChange:未定义，
handleCurrencyChange:未定义，
风格：{
标签宽度：50，
类：{formControl:：}，
},
错误：{isError:false，错误文本：'}，
};
});
在每个（函数（）之后）{
卸载组件节点（容器）；
容器。移除（）；
container=null；
});
以前（（）=>{
模板=（参数）=>；
货币=[
{
名称：“美元”，
国旗：“，
symbo:“$”，
值：“1.54”，
错误：{
伊瑟罗：错，
错误文本：“”，
},
},
];
});
它（“简单测试”，函数（）{
行动（职能）{
const Simple=Template.bind（{}）；
渲染（简单（道具）、容器）；
});
let received=container.textContent.trim（）；//这是上面提到的问题。
控制台日志（已接收）；
console.log（received.length）；
让期望值=货币[0]。名称；
预期（已收到）。托比（预期）；
});

//CurrencyTextField.js
从“React”导入React；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/inputadornation”导入输入；
从“@material ui/core/FormControl”导入FormControl；
从“@material ui/core/FormHelperText”导入FormHelperText；
从“@material ui/core/InputLabel”导入InputLabel；
从“@material ui/core/OutlinedInput”导入OutlinedInput；
从“@material ui/core/MenuItem”导入菜单项；
从“道具类型”导入道具类型；
常量CurrencyTextField=（道具）=>{
常数{
货币，
现在的
手工换货，
handleCurrencyChange，
风格
}=道具；
const{classes，labelWidth}=style；
const{formControl}=类；
常量{name，value}=current；
const{errorText，isError}=current.error；
返回(
{name}
(
{currency.symbol}
))}
}
labelWidth={labelWidth|55}
/>
{errorText}
);
};
常数c=PropTypes.shape({
名称：PropTypes.string，
标志：PropTypes.string，
符号：PropTypes.string，
值：PropTypes.string，
错误：PropTypes.shape({
isError:PropTypes.bool，
errorText:PropTypes.string，
}),
});
CurrencyTextField.propTypes={
货币：PropTypes.arrayOf（_c），
当前：_c，
handleValueChange:PropTypes.func，
handleCurrencyChange:PropTypes.func，
样式：PropTypes.object，
};
导出默认的CurrencyTextField；

package.json

：

{
“名称”：“交换”，
“版本”：“0.1.0”，
“私人”：没错，
“依赖项”：{
“@material ui/core”：“4.11.3”，
“@材料界面/图标”：“4.11.2”，
“@storybook/cli”：“6.1.18”，
“@测试库/jest dom”：“^5.11.4”，
“@testing library/react”：“^11.1.0”，
“@测试库/用户事件”：“^12.1.10”，
“clsx”：“1.1.1”，
“金钱”：“0.2.0”，
“漂亮的调色板”：“3.0.0”，
“反应”：“^17.0.1”，
“react dom”：“^17.0.1”，
“反应脚本”：“4.0.2”，
“web重要信息”：“^1.0.1”
},
“脚本”：{
“开始”：“浏览器=无反应脚本开始”，
“构建”：“反应脚本构建”，
“测试”：“反应脚本测试”，
“弹出”：“反应脚本弹出”，
“故事书”：“浏览器=无开始故事书-p 6006-s公共”，
“生成故事书”：“生成故事书-s公共”
},
“eslintConfig”：{
“扩展”：[
“反应应用程序”，
“react应用程序/笑话”
]
},
“浏览者”：{
“生产”：[
">0.2%",
“没有死”，
“不是全部”
],
“发展”：[
“上一个chrome版本”，
“上一个firefox版本”，
“最后1个safari版本”
]
},
“依赖性”：{
“@storybook/addon actions”：“^6.1.18”，
“@storybook/addon essentials”：“^6.1.18”，
“@storybook/addon链接”：“^6.1.18”，
“@storybook/node logger”：“^6.1.18”，
“@storybook/preset创建反应应用程序”：“^3.1.6”，
@storybook/react:“^6.1.18”
}
}

DOM折叠是由于

OutlinedInput

组件而发生的

---

纱线测试失败。

没有这样的概念

分配内存的长度和“逻辑”内存的长度彼此不同

在JavaScript中，至少对用户来说不是这样

您可能正在寻找

container.innerText

。我想不是