如何在 React 中为 react-helmet 进行元标记和标题单元测试？

Question

如何在 enzyme 中进行单元测试以检查 <title> 和 <meta /> 是否存在及其内容？

index.test.js

describe('<Helmet />', () => {
  it('should render an <Helmet> tag', () => {
    let wrapper = mount(
      <IntlProvider locale='en'>
        <ThemeProvider theme={theme}>
          <Helmet />
        </ThemeProvider>
      </IntlProvider>
    );
    console.log(wrapper.find('title').length);
    // expect(document.title).to.equal('My page title);
  });
});

index.js

const App = ({ intl }) => {
  const domain = window.location.hostname;
  return (
    <div>
      <Helmet>
        <title>My page title</title>
        <meta name="title" content="meta content" />
        <meta name="description" content="meta description" />
        <meta property="og:title" content="meta title for fb" />
        <meta property="og:description" content="meta description for fb" />
        <meta property="og:url" content={`https://${domain}/`} />
      </Helmet>

      <CookiesProvider>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route component={NotFoundPage} />
        </Switch>
      </CookiesProvider>
    </div>
  );
};

Answer 1

总是有机会 shallow 测试确切的组件：

export const App = ({ intl }) => {
  const domain = window.location.hostname;
  return (
    <div>
      <Helmet>
        <title>My page title</title>
        <meta name="title" content="meta content" />
        <meta name="description" content="meta description" />
        <meta property="og:title" content="meta title for fb" />
        <meta property="og:description" content="meta description for fb" />
        <meta property="og:url" content={`https://${domain}/`} />
      </Helmet>
    </div>
  );
};

测试代码：

it("<meta> and <title> exists with proper content", () => {
  const wrapper = shallow(<App />);

  const title = "My page title";
  const metaTitleContent = "meta content";
  const metaDescriptionContent = "meta description";

  expect(wrapper.find("title").text()).toBe(title);
  expect(document.title).toBe(title);

  expect(
    wrapper.find("meta[name='title']").props().content)
  .toBe(metaTitleContent);

  expect(
    wrapper.find("meta[name='description']").props().content)
  .toBe(metaDescriptionContent);
});

如何在 React 中为 react-helmet 进行元标记和标题单元测试？

How to do meta tag and title unit test in React for react-helmet?

javascript

reactjs

unit-testing

enzyme

react-helmet