Как я могу проверить входы в фермент, не разрушая реф - PullRequest
0 голосов
/ 14 октября 2019

В настоящее время я пишу тест для простой формы:

export const TestComponent = () => {
  const [todos, setTodos] = useState([`Todo 1`, `Todooo 2`]);

  const todoInputRef = useRef<HTMLInputElement>(null);

  return (
    <div className={style.wrapper}> 
      <div className={style.todos}>
        <div className={style.todoList}>
          {todos.map((current, i) => (
            <div className={style.todo} key={`todo-` + i}>
              <span>{current}</span>
            </div>
          ))}
        </div>
        <div className={style.addTodo}>
          <input
            ref={todoInputRef}
            className={style.todoInput}
            type="text"
            placeholder="Type a todo here ..."
          />
          <button
            onClick={() => {
              act(() => {
                const currentTodoInputRef = todoInputRef.current;
                if (currentTodoInputRef) {
                  console.log(currentTodoInputRef);
                  setTodos(todos.concat(currentTodoInputRef.value));
                }
              });
            }}
            type="submit"
          >
            OK
          </button>
        </div>
      </div>
    </div>
  );
};

Как вы видите, у меня есть console.log в событии onClick для Button. Моя проблема в том, что я получаю другую ссылку, когда я вызываю событие через энзим.

Ссылка, когда я нажимаю кнопку вручную:

{current: input.TestComponent_todoInput}

Когда энзим вызывает событие:

{current: WrapperComponent {...}}

Итак, как я могу получить "реальный" реф?

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

Мой тестовый код:

let wrapper: ShallowWrapper;
beforeEach(() => {
  wrapper = shallow(<TestComponent />);
});

it(`add todo works`, () => {
  const form = mount(
    wrapper
      .find(`div.todos`)
      .find(`div.addTodo`)
      .getElement()
  );
  const input = mount(form.find(`input`).getElement());
  input.props().value = `xyz`;

  const button = form.find(`button`);
  button.simulate(`click`);
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...