单元测试反应头盔代码

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 测试库和 JSDOM 时遇到了类似的情况，但我不想针对 Helmet 实现进行测试，因为这违反了 React 测试库的指导原则。我发现做了显而易见的事情：

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

即使您正在等待的 DOM 元素在与 DOM 元素相同的渲染中渲染，也不起作用<Helmet>

然而，这确实有效：

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

我认为 React 和 Helmet 之间存在一些计时问题，这意味着渲染 DOM 的其余部分和在 JSDOM 中设置标题之间存在延迟。