TypeError: document.createElement is not a function

user_782358 0
Viewed 2496

I'm trying to test a simple React component with ts-jest that contains Office Fabric React components:

import { Stack, Text } from "office-ui-fabric-react";
import * as React from "react";

import "./ListItem.scss";

export interface ListItemProps {
  title: string;
}

export const ListItem = (props: ListItemProps) => (
  <Stack className={"list-item"} data-is-focusable={true}  verticalAlign="center">
    <Text>{props.title}</Text>
  </Stack>
);

Spec:

import * as Adapter from "enzyme-adapter-react-16";
import { configure, shallow } from "enzyme";
import { ListItem, ListItemProps } from "./ListItem";

const item: ListItemProps = { title: "Hello" };

describe("ListItem", () => {
  configure({ adapter: new Adapter() });
  it("should render my component", () => {
    const wrapper = shallow(ListItem(item));
    expect(true).toBe(true);
  });
});

but getting the following error when running the test:

TypeError: document.createElement is not a function

at Stylesheet.Object..Stylesheet._createStyleElement (/Users/joebloggs/Documents/Projects/Add-In/node_modules/@uifabric/merge-styles/lib-commonjs/Stylesheet.js:250:33) at Stylesheet.Object..Stylesheet._getStyleElement (/Users/joebloggs/Documents/Projects/Add-In/node_modules/@uifabric/merge-styles/lib-commonjs/Stylesheet.js:235:33) at Stylesheet.Object..Stylesheet.insertRule (/Users/joebloggs/Documents/Projects/Add-In/node_modules/@uifabric/merge-styles/lib-commonjs/Stylesheet.js:167:71) at applyRegistration (/Users/joebloggs/Documents/Projects/Add-In/node_modules/@uifabric/merge-styles/lib-commonjs/styleToClassName.js:269:20) at Object.styleToClassName (/Users/joebloggs/Documents/Projects/Add-In/node_modules/@uifabric/merge-styles/lib-commonjs/styleToClassName.js:289:5) at mergeCss (/Users/joebloggs/Documents/Projects/Add-In/node_modules/@uifabric/merge-styles/lib-commonjs/mergeStyles.js:45:37) at Object.mergeStyles (/Users/joebloggs/Documents/Projects/Add-In/node_modules/@uifabric/merge-styles/src/mergeStyles.ts:26:9) at _constructFinalProps (/Users/joebloggs/Documents/Projects/Add-In/node_modules/@uifabric/foundation/lib-commonjs/slots.js:218:36) at result (/Users/joebloggs/Documents/Projects/Add-In/node_modules/@uifabric/foundation/lib-commonjs/slots.js:99:22) at _renderSlot (/Users/joebloggs/Documents/Projects/Add-In/node_modules/@uifabric/foundation/lib-commonjs/slots.js:235:41)

office-ui-fabric ts-jest enzyme typescript reactjs
2 Answers

Well, out of curiosity I tried mount rather than shallow in the test and got this error:

Error: It looks like you called mount() without a global document being loaded.

Googling this error lead me to this issue - https://github.com/airbnb/enzyme/issues/341. The following solutions worked and they also cleared the error in the question for shallow()

https://github.com/airbnb/enzyme/issues/341#issuecomment-455447456

testEnvironment: 'jsdom',

https://github.com/airbnb/enzyme/issues/341#issuecomment-500437113

/**
 * @jest-environment jsdom
 */
user_7823580

Try giving the type React.FunctionComponent to your ListItem

    export const ListItem: React.FunctionComponent<ListItemProps> = (props) => (
      <Stack className={"list-item"} data-is-focusable={true}  verticalAlign="center">
        <Text>{props.title}</Text>
     </Stack>
    );
user_86481450
Related