Question

下面是组件计算器。

import SubComponent from './SubComponent';
export default class Calculator extends React.Component {
  render() {
    const {
      result,
    } = this.state;

    return (
      <form>
        <input
          type="number"
          defaultValue={0}
          ref={(el) => this.elements.value1 = el}
        />
        <input
          type="number"
          defaultValue={0}
          ref={(el) => this.elements.value2 = el}
        />
        <button type="button" onClick={this.add} />
        <p className="result">{result}</p>
        <SubComponent name="sub component"></SubComponent>
      </form>
    );
  }


}

下面是子组件。

import React from 'react';
import SubSubComponent from './SubSubComponent ';

const SubComponent = ({ name }) => (
  <div>
    {`${name}`}
    <SubSubComponent name="sub sub component"  />
  </div>
);

export default SubComponent;

下面是子组件引用的子子组件。

import React from 'react';
import SubSubComponent from './SubSubComponent ';

const SubComponent = ({ name }) => (
  <div>
    {`${name}`}
    <SubSubComponent name="sub sub component"  />
  </div>
);

export default SubComponent;

当我测试如下酶提供的浅层安装方法时。

const calculator = shallow(
  <Calculator />
);
console.log(calculator.html());

const calculator2 = mount(
  <Calculator />
);
console.log(calculator2.html());

它们都在html下方打印。

<form><input type="number" value="0"><input type="number" value="0"><button type="button"></button>
  <p class="result"></p>
  <div>sub component<div>sub sub component</div>
  </div>
</form>

但是文档中的浅渲染表示：“浅渲染有助于约束自己将组件作为一个单元进行测试，并确保您的测试不会间接断言子组件的行为。”

所以我认为浅层无法渲染子组件。您能否解释两种方法之间的区别？谢谢。

Answer 1

html函数返回整个标记，包括子组件。它将浅层和深层安装的组件相同，完全渲染了树。

请参阅文档here。

如果以其他方式显示浅输出，则应该显示浅输出。例如：

expect(calculator).toEqual(...);

或

expect(wrapper.find(SubComponent).length).toBe(1);

浅层安装（不使用html）会将组件<SubComponent />渲染为<SubComponent />，而深层安装将渲染子组件的内容。请参阅this answer，以获取有关浅层安装与深层安装的详细说明。

浅层和镶嵌在酶中

1 个答案: