问使用Jest和Enzyme测试Material-UI组件时，无法读取未定义的属性'have‘
EN

Stack Overflow用户

提问于 2019-08-19 04:52:56

回答 1查看 1.1K关注 0票数 0

我正在编写Storybook教程，但使用Material-UI作为UI框架。

我已经完成了可以使用Task和TaskList组件的阶段。我开始使用Jest和enzyme编写测试，这就是事情开始动摇的地方。

我的测试看起来像

import React from "react";
import ReactDOM from "react-dom";
import TaskList from "./TaskList";
import { withPinnedTasks } from "../../stories/TaskList.stories";
import { MuiThemeProvider } from "@material-ui/core";
import { theme } from "../theme";
import { createMount } from "@material-ui/core/test-utils";

describe("SearchField", () => {
  let mount;
  beforeEach(() => {
    mount = createMount();
  });

  afterEach(() => {
    mount.cleanUp();
  });

  it("renders pinned tasks at the start of the list", () => {
    const div = document.createElement("div");
    const events = { onPinTask: jest.fn(), onArchiveTask: jest.fn() };

    let wrapper = mount(
      <MuiThemeProvider theme={theme}>
        <TaskList tasks={withPinnedTasks} {...events} />
      </MuiThemeProvider>
    );

    console.log(wrapper);

    // We expect the task titled "Task 6 (pinned)" to be rendered first, not at the end
    const lastTaskInput = wrapper.find('#id').to.have.lengthOf(1);

    // querySelector(
    //   '.list-item:nth-child(1) input[value="Task 6 (pinned)"]'
    // );
    expect(lastTaskInput).not.toBe(null);

    ReactDOM.unmountComponentAtNode(div);
  });
});

当我运行yarn test时，它会失败，并显示以下错误

  ● SearchField › renders pinned tasks at the start of the list

    TypeError: Cannot read property 'have' of undefined

      30 |
      31 |     // We expect the task titled "Task 6 (pinned)" to be rendered first, not at the end
    > 32 |     const lastTaskInput = wrapper.find('#id').to.have.lengthOf(1);
         |                           ^
      33 |
      34 |     // querySelector(
      35 |     //   '.list-item:nth-child(1) input[value="Task 6 (pinned)"]'

      at Object.it (src/components/TaskList.test.js:32:27)

整个代码库可以在https://codesandbox.io/s/github/hhimanshu/storyboook-materialui-react/tree/jest上找到

但由于这是测试中的一个失败，如果您正在寻找直接的github链接，您可以在https://github.com/hhimanshu/storyboook-materialui-react/tree/jest上找到此链接

我正在寻求以下方面的帮助