TypeError: document.createElement не является функцией - PullRequest
Новая
       51

TypeError: document.createElement не является функцией

2 голосов
/ 15 октября 2019

Я пытаюсь протестировать простой компонент React с ts-jest , который содержит компоненты Office Fabric React: 

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>
);

Спецификация: 

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);
  });
});

но получая следующую ошибку при запуске теста:

TypeError: document.createElement не является функцией

в Stylesheet.Object..Stylesheet._createStyleElement (/ Users / joebloggs / Documents/Projects/Add-In/node_modules/@uifabric/merge-styles/lib-commonjs/Stylesheet.js:250:33) в Stylesheet.Object..Stylesheet._getStyleElement (/ Users / joebloggs / Documents / Projects / Add-In/node_modules/@uifabric/merge-styles/lib-commonjs/Stylesheet.js:235:33) в Stylesheet.Object..Stylesheet.insertRule (/ Пользователи / joebloggs / Документы / Проекты / Надстройка / node_modules / @ uifabric /merge-styles / lib-commonjs / Stylesheet.js: 167: 71) в applyRegistration (/Users/joebloggs/Documents/Projects/Add-In/node_modules/@uifabric/merge-styles/lib-commonjs/styleToClassName.js:269: 20) в Object.styleToClassName (/ Users / joebloggs / Documents / Projects/Add-In/node_modules/@uifabric/merge-styles/lib-commonjs/styleToClassName.js:289:5) в mergeCss (/ Users / joebloggs / Documents / Projects / Надстройка / node_modules / @ uifabric / merge-styles/lib-commonjs/mergeStyles.js:45:37) в Object.mergeStyles (/Users/joebloggs/Documents/Projects/Add-In/node_modules/@uifabric/merge-styles/src/mergeStyles.ts:26:9)в _constructFinalProps (/Users/joebloggs/Documents/Projects/Add-In/node_modules/@uifabric/foundation/lib-commonjs/slots.js:218:36) в результате (/ Users / joebloggs / Documents / Projects / Add-In/node_modules/@uifabric/foundation/lib-commonjs/slots.js:99:22) в _renderSlot (/Users/joebloggs/Documents/Projects/Add-In/node_modules/@uifabric/foundation/lib-commonjs/slots.js: 235: 41)

Ответы [ 2 ]

1 голос
/ 15 октября 2019

Что ж, из любопытства я попытался mount вместо shallow в тесте и получил эту ошибку:

Ошибка: похоже, вы назвали mount() без глобального документазагружен.

Поиск этой ошибки привел меня к этой проблеме - https://github.com/airbnb/enzyme/issues/341. Следующие решения сработали, и они также устранили ошибку в вопросе для shallow()

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

testEnvironment: 'jsdom',

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

/**
 * @jest-environment jsdom
 */
0 голосов
/ 15 октября 2019

Попробуйте указать тип React.FunctionComponent для ListItem

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