React 测试库 - "messageParent" 只能在 worker 内部使用

Question

我正在使用RTL测试一个react组件，每次运行测试时，我都会得到

"messageParent" can only be used inside a worker

**这是代码

describe('Header', () => {
it('validates header component is rendered', () => {
const { getByTestId } = render(<Header patientName="Jake Bland" />);
expect(getByTestId('patient-name')).toHaveTextContent(/^Jake Bland$/);
expect(getByTestId('dateRange')).toBe(dateRange);
});
});

如有任何帮助，我们将不胜感激。

Answer 1

我遇到了同样的问题，这是由在HTMLElement上调用toBe()或toEqual()引起的。所以你最可能的罪魁祸首是这里，因为getByTestId返回了一个HTMLElement:

expect(getByTestId('dateRange')).toBe(dateRange);

我通过对元素的文本内容进行测试来解决问题。

expect(getByTestId('dateRange')).toHaveTextContent('...');

Answer 2

嗨，我在谷歌上搜索了一段时间后发现了同样的问题：github问题论坛

事实证明，这个问题是由node12版本引起的。我将我的一个版本降级到了版本10，一切正常。我也升级到了版本14，这也正常。

检查您的终端中的节点版本：

1. node-vif(版本12(升级它
2. nvm安装v14.8.0(类似于此或leates(
3. nvm使用v14.8.0(或您可能希望安装的高于12的任何其他版本(

希望这能帮助

Answer 3

我在测试<select>是否有正确数量的选项时遇到了这个错误

expect(container.querySelectorAll('option')).toBe(2);

@测试库/rect必须尝试做一些奇怪的事情来获得HTML集合的长度，我已经这样做了。所以我在查询中添加了.length：

expect(container.querySelectorAll('option').length).toBe(2);

一切都很好。

Answer 4

我也有同样的错误，但我能够通过在测试文件中导入'@testing-library/jest-dom'来修复它：

import '@testing-library/jest-dom'

事实证明，上面的包是"@testinglibrary/areact"的peerDependency。因此出现了错误。