Фермент изменить другое поле ввода

Question

У меня есть простой компонент React, который имеет одно поле ввода электронной почты и флажок, подобный этому:

interface MyProps {
  onSubmit?: (form: any) => void;
}
class Preferences extends React.Component<MyProps> {
  state = {
    primaryEmailCheckbox: false,
    primaryEmail: "",
  };

  onPrimaryEmailChange = e => {
    this.setState({ primaryEmail: e.target.value });
    let checkbox = document.getElementById("primaryEmailCheckId") as HTMLInputElement;
      checkbox.disabled = false; //<<< checkbox is null. lets say this is line 18
    }
  }

  render() {
    return (
        <StaticContent />
          <h3>Email Address</h3>
          <div className="ui mini icon input">
            <input type="email" value={this.state.primaryEmail} placeholder="Enter email..." onChange={this.onPrimaryEmailChange} />
          </div>
          <div className="ui checkbox">
            <input type="checkbox" disabled={true} id="primaryEmailCheckId" onChange={e => this.setState({ primaryEmailCheckbox: e.target.checked })} /><label> Continue to receive further email communications from Us </label>
          </div>
    );
  }
}
export default Preferences;

Когда кто-либо вводит какую-либо вещь в поле электронной почты, флажок становится видимым для пользователя, чтобы проверить это или оставить его не отмеченным. Когда я запускаю приложение, оно работает как положено. Но когда я проверяю его, он говорит, что флажок равен нулю (в строке 18), поэтому вы не можете отключить его. Это тест для проверки предпочтений компонента:

import * as React from "react";
import { shallow } from "enzyme";
import Preferences from "../../components/Preferences";

  test("Preferences shows email and checkbox", () => {
    const wrapper = shallow(<Preferences onSubmit={() => { }} />);
    wrapper.find("input").at(0).simulate("change", {
      target: {
        value: "a@b.c",
      }
    });
    expect(wrapper.find("input").state().value).toEqual("a@b.c");
  });

Это выдает исключение Null в строке 18. Дело в том, что значение a@b.c передается правильно, и я проверил это, разместив операторы журнала. Но когда я пытаюсь изменить значение типа ввода email, он вызывает метод onChange, который пытается получить (и изменить) значение другого поля ввода.

Я не знаю, как изменить значение второго типа ввода, который является флажком. Как я могу заставить это работать? Любая помощь приветствуется.

Answer 1

Это связано с тем, что метод рендеринга shallow(...) предоставляет ограниченный набор шаблонов взаимодействия, а document.getElementById(...) не является одним из них. Вы должны быть в состоянии получить то, что вы хотите, используя следующее:

const wrapper = mount(<Preferences />, { attachTo: document.body });

( Документы для вышеуказанного кода. Вы можете заменить document.body на соответствующий эквивалент, если вы используете что-то вроде JSDOM или аналогичное).

Тем не менее ... использование document.getElementById вообще - огромный красный флаг в разработке React. Поскольку React позволяет вам взаимодействовать с виртуальным DOM и обрабатывает его применение к реальному DOM, самостоятельная работа с реальным является отличным способом устранения всевозможных ошибок. Гораздо лучшим вариантом было бы использовать refs для доступа к флажку в «React way» или просто сделать checkboxEnabled: boolean частью вашего состояния и обновить его внутри вашего onPrimaryEmailChange() метода.