Question

我最近开始使用React开发组件，现在事情开始好看，我想用Mocha和Enzyme测试它们。

以下是我的答案提议/问题/请求：

我有一个Fieldset组件，它包含一个“标题”道具和其他组件（几个Field组件），我使用{this.props.children）传递，如下所示：

组件：

export default class Fieldset extends React.Component {
  constructor(props) {
      super(props);
  }

  render() {
    return (
      <fieldset>
         <p>{this.props.title || ""}</p>
         {this.props.children}
      </fieldset>
   );
 }
}

使用：

<Fieldset title="Log In">
    <Field
      label={<Label text="username" />}
      input={
        <TextInput
          fieldName="username"
          type="text"
          placeholder="Enter your username"
          state={this.props.state}
          handleChange={this.props.handleInputChange}
        />
      }
    />
    <Field
      label={<Label text="password" />}
      input={
        <TextInput
          fieldName="password"
          type="password"
          placeholder="Enter your password"
          state={this.props.state}
          handleChange={this.props.handleInputChange}
        />
      }
    />

测试

我已经进行了一些测试，例如

describe('<Fieldset />', () => {
  let wrapper;

  beforeEach(() => {
     wrapper = mount(
        <Fieldset
           title="My title"
        />
     )
  });

  it('should have a title variable in the props', () => {
     expect(wrapper.props().title).to.equal('My title');
  });

问题：

1）使用组件作为“input = {[TextInput title =”blabla“]}等其他组件的道具是一种好习惯吗？

2）如何在我的测试中测试{this.props.children}的行为？

a：我应该使用类似的东西，不要过多担心节点，除非确保它等于我的节点变量的内容吗？

   const node = <div>Hi</div>

   beforeEach(() => {
      wrapper = mount(
         <Fieldset
            title="My title"
            {node}
      />
    )
   });

b：我是否应该使用模拟道具等导入其他组件（在本例中为Field组件）（如实际使用带子组件的组件）并使用它来测试Fieldset组件？对于此Fieldset测试，我不会脱离上下文吗？

<Fieldset title="Log In">
    <Field
      label={<Label text="my label" />}
      input={
        <TextInput
          fieldName="username"
          type="text"
          * etc etc * 
        />
    />
 </Fieldset>

感谢您帮助我找出最适合测试我的组件的方法。

使用子组件

0 个答案: