单元测试反应头盔代码

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 测试库和 JS 时遇到了类似情况DOM，但我不想让测试特定于 Helmet 实现，因为这违反了 React 测试库的指导原则。我发现这样做很明显：

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

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

但是，这确实有效：

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

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

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> 标签。

Answer 4

今天我测试了在 react 函数的 return 中简单地添加 <HelmetProvider>。在那之前，我有像

这样的错误

TypeError: Cannot read properties of undefined (reading 'add')

在测试中来到渲染命令时。添加 <HelmetProvider> 测试后没有错误。

单元测试反应头盔代码

Unit testing react-helmet code

javascript

unit-testing

reactjs

react-helmet