javascript - 单元测试反应头盔代码

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 元素与<Helmet>

但是，这确实有效：

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

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

Answer 3

如果您想仅使用 jest 而没有其他模块（如酶等）来测试头盔，您可以执行以下操作：

添加：

jest.mock('react-helmet', () => {
    const React = require('react');
    const plugin = jest.requireActual('react-helmet');
    const mockHelmet = ({children, ...props}) =>
        React.createElement('div', {
            ...props,
            className: 'mock-helmet',
        }, children);
    return {
        ...plugin,
        Helmet: jest.fn().mockImplementation(mockHelmet),
    };
});

给你setupFiles开玩笑的配置。

现在它将呈现一个<div className="mock-helmet">您可以用于快照测试或进一步检查并检查<meta>内部是否存在某个标签的标签。