Question

我正在研究[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

上找到它。

我正在寻求以下方面的帮助
1.这段代码有什么不正确的地方？我正在学习使用Jest和enzyme进行测试，很想知道我需要学习什么
2.如何使用Material-UI测试MuiThemeProvider自定义主题的组件。

谢谢

Answer 1

我认为.to.have不是开玩笑的语法，我相信酶文档采用了不同的测试框架吗？在此处检查可以在开玩笑的expect方法调用中调用什么

https://jestjs.io/docs/en/expect

您可能需要

const lastTaskInput = expect(wrapper.find('#id').length).toEqual(1);

从这里专门阅读...

https://jestjs.io/docs/en/expect#toequalvalue

使用Jest和酶测试Material-UI组件时，无法读取未定义的属性“具有”

1 个答案: