Question

我的React组件包含以下代码：

  componentWillUnmount () {
    document.body.classList.remove('isPreloaded')
  }

我的body标记为isPreloaded，Preloader HTML和样式最初位于index.html（作为关键内容）。加载应用程序时，Preloader组件将呈现为正文（对用户没有任何更改）。当数据从服务器到达时，Preloader将被删除。当然，我必须删除isPreloaded类，因为它使主体不可滚动。

以上描述与我的问题没有直接关系，但我决定添加它以防止“这是不好的做法”或类似的评论。

所以我想测试一下这种行为。为了确保按预期工作，我必须使用类<body>在isPreloaded内呈现此组件并将其保存在变量中，让它为container。然后我必须检查container中是否存在此类。在第二个测试中，我必须从容器中卸载组件并检查该类是否已消失。

这大约是我想要实现的目标：

describe('<Preloader />', () => {
  const container = mount(<body className='isPreloaded'><Preloader /></body>)

  it('should be rendered with `isPreloaded` class', () => {
    expect(container.find('isPreloaded').length).toBe(1)
  })

  ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(container).childNode)

  it('should remove `isPreloaded` class from body when unmounted', () => {
    expect(container.find('.isPreloaded').length).toBe(0)
  })
})

但它不起作用。第一个断言返回0而不是1，因此失败。第二个引发以下错误：

Invariant Violation: findDOMNode was called on an unmounted component.

Answer 1

ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(container).childNode)是一个异步函数，所以你应该这样做： -

setTimeout(function() {
    ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(container).childNode)
}, 3000

您还可以将侦听器添加到componentWillUnmount（）。

对于it问题的

使用此：

let {TestUtils} = React.addons;
this.container = TestUtils.renderIntoDocument(<body       className='isPreloaded'><Preloader /></body>)
this.renderedDOM = () => React.findDOMNode(this.container);

it('should be rendered with `isPreloaded` class', () => {
    expect(this.renderedDOM().children.length).toEqual(1);
  })

测试componentWillUnmount（）从正文

1 个答案: