Ошибка чтения свойства из пользовательского хука React во время тестов - PullRequest
Новая
       17

Ошибка чтения свойства из пользовательского хука React во время тестов

1 голос
/ 23 марта 2020

Я пытаюсь создать пользовательский хук для React, чтобы я мог изолировать и протестировать логику вида c. Вот упрощенная версия моего хука: 

import {useState} from "react";

function useQuestionInput() {
    const [category, set_category] = useState("");

    return {set_category, category}
}

export {useQuestionInput}

Мой тест выглядит следующим образом: 

describe("Question Input View Model", function () {
    it("intial values are empty", function () {
        const {result} = renderHook(() => useQuestionInput({}));

        expect(result.current.category).to.equal("");
    });

    it("addQuestion calls props", function () {
        let question = null;

        const {result} = renderHook(() => {
            useQuestionInput({
                onQuestionCreation: (created_question) => {
                    question = created_question
                }
            })
        });

        act(() => {
            result.current.set_category("new Category")
        })

        expect(result.current.category).to.equal("new Category");
    })
});

Когда мои тесты выполняются, я получаю сообщение об ошибке, поскольку свойство set_category отсутствует: 

1) Question Input View Model
       addQuestion calls props:
     TypeError: Cannot read property 'set_category' of undefined
      at /Users/jpellat/workspace/Urna/urna_django/website/tests/components.test.js:27:28
      at batchedUpdates (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12395:12)
      at act (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14936:14)
      at Context.<anonymous> (tests/components.test.js:26:9)
      at processImmediate (internal/timers.js:456:21)

Почему функция set_category недоступна из пользовательского хука?

1 Ответ

0 голосов
/ 25 марта 2020

Вам необходимо убедиться, что вы возвращаете результат своего хука из обратного вызова renderHook. 

const {result} = renderHook(() => {
  // no return
  useQuestionInput({
    onQuestionCreation: (created_question) => {
      question = created_question
    }
  })
});

Измените его на 

const {result} = renderHook(() => {
  return useQuestionInput({
    onQuestionCreation: (created_question) => {
      question = created_question
    }
  })
});

или просто 

const {result} = renderHook(() => useQuestionInput({
  onQuestionCreation: (created_question) => {
    question = created_question
  }
}));
...