Error in test: Cannot automatically buffer without a document

[niksosf]

Hi there, I was testing a simple stateless functional component while encountered this. Here's my component and the test code:

import React from 'react';
import { StyleSheet, css } from 'aphrodite';

const Dummy = ({
  name,
}) => {
  return <div className={css(styles.preview)}>
      <h4>Boo!</h4>
  </div>
}
const styles = StyleSheet.create({
  preview: {
    fontFamily: 'Times New Roman',
  },
})
export default Dummy

And the test:

describe('Components', () => {
  describe('HTMLPreview', () => {
    it.only('Work', () => {
      const props = {
        name: 'hi'
      }
      const renderer = TestUtils.createRenderer();
      renderer.render(<Dummy {...props} />);
      const output = renderer.getRenderOutput();

      return {
        output,
        renderer
      }
    });

  });
});

And finally the error:

  Components
    HTMLPreview
      1) Work


  0 passing (154ms)
  1 failing

  1) Components HTMLPreview Work:
     Error: Cannot automatically buffer without a document
      at injectStyleOnce (node_modules/aphrodite/lib/inject.js:90:23)
      at css (node_modules/aphrodite/lib/index.js:73:33)
      at new Dummy (Dummy.jsx:7:26)
      at [object Object].ReactCompositeComponentMixin.mountComponent (node_modules/react/lib/ReactCompositeComponent.js:148:18)
      at [object Object].wrapper [as mountComponent] (node_modules/react/lib/ReactPerf.js:66:21)
      at [object Object].ReactShallowRenderer._render (node_modules/react/lib/ReactTestUtils.js:366:14)
      at _batchedRender (node_modules/react/lib/ReactTestUtils.js:348:12)
      at ReactDefaultBatchingStrategyTransaction.Mixin.perform (node_modules/react/lib/Transaction.js:136:20)
      at Object.ReactDefaultBatchingStrategy.batchedUpdates (node_modules/react/lib/ReactDefaultBatchingStrategy.js:62:19)
      at Object.batchedUpdates (node_modules/react/lib/ReactUpdates.js:94:20)
      at [object Object].ReactShallowRenderer.render (node_modules/react/lib/ReactTestUtils.js:343:16)
      at Context.<anonymous> (html_preview_component_spec.js:62:16)

Any one can shed some light on this?

Thank you!

[montemishkin]

Seems like a problem with your testing environment. The error says there is no document. Thus I'm guessing you are running your tests in a node environment (as opposed to running them in browser environment).

If you are trying to test how your components will render in a browser environment, there are many tools out there that will run your tests in browser. Two examples are karma and browser-run.

If you are trying to test how your components will render on the server, then you will need to do something more along the lines of this in your tests:

import {renderToString} from 'react-dom/server'
import {StyleSheetServer} from 'aphrodite'

const {html, css} = StyleSheetServer.renderStatic(() => renderToString(<Dummy {...props} />))

as explained here.

Hope that helps!

[xymostech]

Aphrodite won't work without a browser environment. It tries to automatically inject styles into the document, which doesn't work without some setup. I'm not sure what your TestUtils.createRenderer() does, but as @montemishkin says, wrapping your call in StyleSheetServer.renderStatic is probably what you want to do.

You can also use something like jsdom to simulate a browser environment, which is what we do in our tests: https://github.com/Khan/aphrodite/blob/master/tests/index_test.js#L9

[niksosf]

@xymostech @montemishkin Thanks guys, indeed, I am using just mocha testing and didn't realize that Aphrodite requires a DOM to render out the styles (that's my current understanding). Appreciate the suggestion to use StyleSheetServer.renderStatic.