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

但是在运行测试时出现以下错误：

类型错误：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 (/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/Documents/Projects/Add-In/node_modules/@uifabric/foundation/lib-commonjs/slots.js:235:41）_constructFinalProps (/Users/joebloggs/Documents/Projects/Add-In/) 处的合并样式 (/Users/joebloggs/Documents/Projects/Add-In/node_modules/@uifabric/merge-styles/src/mergeStyles.ts:26:9) 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/) 处的合并样式 (/Users/joebloggs/Documents/Projects/Add-In/node_modules/@uifabric/merge-styles/src/mergeStyles.ts:26:9) 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

2

好吧，出于好奇，我尝试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
 */
于 2019-10-15T10:32:01.380 回答
0

尝试给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>
    );
于 2019-10-15T09:12:06.513 回答