Почему энзимы "монтируют" оболочку, просто отображающую теги <ul>, но больше ничего?

Question

Я сейчас учусь тестированию и создал очень простой пример.В компоненте, который я хочу протестировать, я рендерил несколько элементов li внутри одного тега ul.

Когда я оборачиваю компонент в оболочку mount и распечатываю html на консоль, я просто получаю <ul></ul>

Я не знаю почему?Проблема сейчас заключается в том, что я не могу найти элементы button, которые я хочу имитировать, нажмите.

Есть ли какое-то отношение к тому, как я отображаю список задач?Фермент не работает с renderFunction?

Вот пример: https://codesandbox.io/s/v8ljxo5xn5

Соответствующие файлы TodoBody.js и TodoBody.test.js

Спасибо!

Answer 1

Это потому, что массив todos пуст, поэтому с карты ничего не возвращается (вероятно, [] - вам нужно это проверить).Быстрое решение:

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>