Question

我学习，现在测试并创建了一个非常简单的例子。在要测试的组件中，我在一个li标签内渲染了几个ul元素。

当我将组件包装在mount包装器中并打印出html进行控制台操作时，我只得到<ul></ul>

我不知道为什么？现在的问题当然是我找不到我要模拟点击的button元素。

有什么办法可以呈现待办事项清单？酶不能与renderFunction一起使用吗？

这里是示例：https://codesandbox.io/s/v8ljxo5xn5

在相应的文件是TodoBody.js和TodoBody.test.js

谢谢！

Answer 1

这是因为todos数组为空，因此map不会返回任何内容（可能是[]-您需要检查）。快速解决方案：

describe("the todobody component", () => {
      test("it should call the passed in onDelete func from props", () => {
        const todos = ['test'];
        const test = { onDelete: () => {} };
        jest.spyOn(test, "onDelete");
        const wrapper = mount(<TodoBody onDelete={test.onDelete} todos={todos} />);

        // this just renders <ul></ul> why??

        console.log(wrapper.html());
      });
    });


const renderTodos = () => {
    return todos.map(todo => (
      <li key={`${todo}`}>
        <p>{todo}</p>
        <button onClick={handleDelete} data-test="test-btn-delete">
          X
        </button>
      </li>
    ));
  };

控制台：

<ul><li><p>test</p><button data-test="test-btn-delete">X</button></li></ul>

为什么酶会“装载”包装纸，而只渲染<ul>标签，而没有其他显示？

1 个答案: