Question

我正在使用react-helmet将元素添加到head元素中。

<Helmet>
     <title>title</title>
     <meta name="description" content="description" />
     <meta name="keywords" content="keywords" />
</Helmet>

我正在尝试像这样编写单元测试：

it('should render metadata', () => {
    const wrapper = mount(<Metadata/>);
    // this is not working.
    expect(document.title).to.equal("title");
});

Answer 1

我自己想出了答案。我做了以下事情：

it('should render metadata', () => {
    const wrapper = mount(<Metadata/>);
    // this will return all the markup assigned to helmet
    // which will get rendered inside head.
    const helmet = Helmet.peek();
    expect(helmet.title).to.equal("title");
});

这是单元测试的技巧。

Answer 2

我在使用React Testing库和JSDOM时处于类似情况，但是我不想针对Helmet实现进行特定的测试，因为这违反了React Testing库的指导原则。我发现这样做很明显：

render(<App />)
await waitFor(...some DOM element)
expect(document.title).toEqual("title")

即使您正在等待的DOM元素与<Helmet>

在同一渲染器中渲染，不也不会起作用

但是，这确实可行：

await waitFor(...some DOM element)
await waitFor( () => expect(document.title).toEqual("title"))

我认为在React和Helmet之间发生了一些计时问题，这意味着其余的DOM呈现与JSDOM中的标题设置之间存在延迟。

单元测试反应头盔代码

2 个答案: