javascript - getByText 用于通过动态生成的字符串将文本拆分为单独的行

Question

我有一个元素在同一行上组合了静态和动态文本。

当通过包含一些静态和动态文本的子字符串测试这行文本时，它失败了，显示输出被拆分为多行，动态部分前后都有拆分。

这是怎么回事？为什么我不能按照我期望的方式测试它？我将如何正确测试它？

代码.jsx

const dynamicText = 'all be on one line';

return <div>This should {dynamicText} like I expect.</div>

代码.spec.js

it('Should have dynamic text on one line', () => {
    const {getByText} = render(<Code />);

    expect(getByText('should all be on one line ')).toBeTruthy();
});

测试输出

Unable to find an element with the text: ... This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

...


<div>
   This should 
   all be on one line
    like I expect
</div>

Answer 1

我找到了一种可以轻松完成此操作的方法。

在我的代码中，我试图匹配完整字符串的子字符串，因为我只对检查动态部分是否正确呈现感兴趣。在引号(单引号或双引号)内指定我要查找的字符串似乎使 RTL 将其视为确定的字符串。

相反，我更改了单引号以使其更像正则表达式样式，因此将 'should all be on one line' 更改为 /should all be on one line/.

测试现在通过了:)