Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Mounting Helmet Tests not working in v5

See original GitHub issue

Running tests for document.head updates using enzyme’s mount function for version 4 and all works fine. Started a migration to v5 but my mounted tests have stopped working.

Setup document:

import { jsdom } from 'jsdom'
import { keys } from 'ramda'

global.document = jsdom(
  '<html><head></head><body><div id="application-root"></div></body></html>'
)
global.window = document.defaultView
keys(document.defaultView).forEach(property => {
  if (typeof global[property] === 'undefined') {
    global[property] = document.defaultView[property]
  }
})

global.navigator = { userAgent: 'node.js' }

My main application render:

const Main = () =>
        <DocumentMeta
          defaultTitle='Breko Hub'
          titleTemplate='%s | Breko Hub'>
          <html lang='en' />
          <meta charSet='utf-8' />
        </DocumentMeta>

Running the tests

const wrapper = mount(Main, { attachTo: document.getElementById('application-root') })

setImmediate(() => {
  // This works:
  expect(document.title).to.eql('Breko Hub')

  // This doesn't work anymore in v5, worked fine in v4
  const meta = document.querySelector('meta')
  // meta === null
})

I have server side tests ensuring that the server renders the appropriate attributes and they work fine using Helmet.canUseDOM = false. But the client-side tests which actually assume the DOM is usable, aren’t working anymore. The document.head remains empty.

const wrapper = mount(Main, { attachTo: document.getElementById('application-root') })

setImmediate(() => {
  (document.head || document.querySelector('head')).innerHTML
  // returns an empty string
})

Issue Analytics

State:
Created 6 years ago
Comments:6

Top GitHub Comments

1reaction

doctypercommented, Mar 28, 2017

You can use our polyfill:

import {requestIdleCallback} from "react-helmet/src/HelmetUtils";

0reactions

joselcccommented, May 24, 2019

I looks like requestIdleCallback was replaces with requestAnimationFrame from v5.2.0

you will need to import it instead

import { requestAnimationFrame } from 'react-helmet/lib/HelmetUtils'; 
.....
.........
describe('Something', () => {
  it('set title', done => {
    ReactDOM.render(
      <Helmet defaultTitle={'Fallback'} title={'Test Title'} />,
      container
    );

    requestAnimationFrame(() => {
      expect(document.title).toEqual('Test Title');
      done();
    });
  });
});

Top Results From Across the Web

49 CFR § 571.218 - Standard No. 218; Motorcycle helmets.

The helmet is fixed on the test headform as necessary to ensure that it does not move during the application of the test...

Effect of helmet design on impact performance of industrial ...

The study concluded that helmet testing standards should evaluate protection against fall-induced TBI as well as skull fractures from falling objects.

helmet - npm

First, run npm install helmet for your app. Then, in an Express app: const express = require("express"); const helmet = require("helmet"); ...

Amazon.com: Motorcycle Helmet Bluetooth Headset,Geva BT ...

Motorcycle Helmet Bluetooth Headset,Geva BT V5.0 Bluetooth for Helmet,160 Hrs Riding Bluetooth Speaker Helmet, A10 Motorbike Helmet Communication System ...

49 CFR 571.218 -- Standard No. 218; Motorcycle helmets.

Secure the helmet so that it does not shift position before impact or before application of force during testing.