2

Office Fabric React コンポーネントを含むts-jestを使用して、単純な 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.Object..Stylesheet.insertRule (/Users /joebloggs/Documents/Projects/Add-In/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) Object.mergeStyles (/Users/joebloggs/Documents) の mergeCss (/Users/joebloggs/Documents/Projects/Add-In/node_modules/@uifabric/merge-styles/lib-commonjs/mergeStyles.js:45:37) /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 (/ユーザー/joebloggs/ドキュメント/プロジェクト/アドイン/node_modules/@uifabric/foundation/lib-commonjs/slots.js:235:41)_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) で_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) で22) _renderSlot (/Users/joebloggs/Documents/Projects/Add-In/node_modules/@uifabric/foundation/lib-commonjs/slots.js:235:41)22) _renderSlot (/Users/joebloggs/Documents/Projects/Add-In/node_modules/@uifabric/foundation/lib-commonjs/slots.js:235:41)

4

2 に答える 2