代码之家 › 专栏 › 技术社区 › Faraz

酶改变另一个输入字段

enzyme jestjs typescript reactjs

0

Faraz · 技术社区 · 7 年前

我有一个简单的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");
  });

这将在第18行引发空异常。实际上,值a@b.c是正确传递的,我通过放置LOG语句来验证它。但是,当我尝试更改输入类型email的值时,它调用一个onchange方法,该方法尝试访问(并更改)另一个输入字段的值。

我不知道如何更改第二个输入类型的值,这是一个复选框。我怎样才能让它工作?感谢您的帮助。

1 回复 | 直到 7 年前

1

Mark Ormesher user428602 7 年前

这是因为 shallow(...) 渲染方法提供了一组有限的交互模式和 document.getElementById(...) 不是他们中的一个。您应该能够使用以下方法获得所需的内容:

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

( Docs for the above code. 你可以换掉 document.body 如果您使用的是类似于jsdom或类似的东西,请参阅相关的等效项)。

说…使用 document.getElementById 完全 是一面巨大的红旗 在反应发展中。因为反应 lets you interact with a virtual DOM 并将其应用到真实的DOM中,亲自处理真实的DOM是一个很好的方法,可以解决各种错误。更好的选择是 use refs 以“反应方式”访问复选框,或 checkboxEnabled: boolean 状态的一部分,并在您的 onPrimaryEmailChange() 方法。