使用 Karma、Mocha 和 React 16.5 诊断重复的规范报告

Question

我有一个项目使用 React 作为视图层。为了测试它，我使用 mocha、karma、karma-webpack 等。出于某种原因，在 React 16+ 中，karma 报告 afterEach 已针对两个规范运行了 3 次。这仅在 React 16+ 中发生，仅在 process.env.NODE_ENV 是 development 而不是 production 时发生。

在之前对该问题的探索中，规范失败的原因可能会级联并污染后续规范。为了帮助确定根本原因，这是我能找到的最简单的示例。

我试图追踪这种行为，但被业力和套接字内部和周围的复杂性所困扰。考虑下面的示例，目前可在https://github.com/jneander/react-mocha 获得。

Example.js

import React, {Component} from 'react'

export default class Example extends Component {
  render() {
    try {
      return (
        <div>{this.props.foo.bar}</div>
      )
    } catch(e) {
      console.log(e) // for logging purposes
      throw e
    }
  }
}

Example.spec.js

import {expect} from 'chai'
import React from 'react'
import ReactDOM from 'react-dom'

class ExampleWrapper extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      error: false
    }
  }

  componentDidCatch(error) {
    console.log('there was a problem')
    this.setState({
      error: true
    })
  }

  render() {
    console.log('rendering!')
    if (this.state.error) {
      console.log('- rendering the error version')
      return <div>An error occurred during render</div>
    }

    console.log('- rendering the real version')
    return (
      <Example {...this.props} />
    )
  }
}

import Example from './Example'

describe('Example', () => {
  let $container

  beforeEach(() => {
    console.log('beforeEach')
    $container = document.createElement('div')
    document.body.appendChild($container)
  })

  afterEach(() => {
    console.log('afterEach')
    ReactDOM.unmountComponentAtNode($container)
    $container.remove()
  })

  async function mount(props) {
    return new Promise((resolve, reject) => {
      const done = () => {
        console.log('done rendering')
        resolve()
      }
      ReactDOM.render(<ExampleWrapper {...props} />, $container, done)
    })
  }

  it('fails this spec', async () => {
    console.log('start test 1')
    await mount({})
    expect(true).to.be.true
  })

  it('also fails, but because of the first spec', async () => {
    console.log('start test 2')
    await mount({foo: {}})
    expect(true).to.be.true
  })
})

规范输出如下：

LOG LOG: 'beforeEach'
LOG LOG: 'start test 1'
LOG LOG: 'rendering!'
LOG LOG: '- rendering the real version'

  Example
    ✗ fails this spec
  Error: Uncaught TypeError: Cannot read property 'bar' of undefined (src/Example.spec.js:35380)
      at Object.invokeGuardedCallbackDev (src/Example.spec.js:16547:16)
      at invokeGuardedCallback (src/Example.spec.js:16600:31)
      at replayUnitOfWork (src/Example.spec.js:31930:5)
      at renderRoot (src/Example.spec.js:32733:11)
      at performWorkOnRoot (src/Example.spec.js:33572:7)
      at performWork (src/Example.spec.js:33480:7)
      at performSyncWork (src/Example.spec.js:33452:3)
      at requestWork (src/Example.spec.js:33340:5)
      at scheduleWork (src/Example.spec.js:33134:5)

ERROR LOG: 'The above error occurred in the <Example> component:
    in Example (created by ExampleWrapper)
    in ExampleWrapper

React will try to recreate this component tree from scratch using the error boundary you provided, ExampleWrapper.'
LOG LOG: 'there was a problem'
LOG LOG: 'done rendering'
LOG LOG: 'rendering!'
LOG LOG: '- rendering the error version'
LOG LOG: 'afterEach'
LOG LOG: 'beforeEach'
LOG LOG: 'start test 2'
LOG LOG: 'rendering!'
LOG LOG: '- rendering the real version'
LOG LOG: 'done rendering'
    ✓ also fails, but because of the first spec
    ✓ also fails, but because of the first spec
LOG LOG: 'afterEach'
LOG LOG: 'afterEach'

Chrome 69.0.3497 (Mac OS X 10.13.6): Executed 3 of 2 (1 FAILED) (0.014 secs / NaN secs)
TOTAL: 1 FAILED, 2 SUCCESS


1) fails this spec
     Example
     Error: Uncaught TypeError: Cannot read property 'bar' of undefined (src/Example.spec.js:35380)
    at Object.invokeGuardedCallbackDev (src/Example.spec.js:16547:16)
    at invokeGuardedCallback (src/Example.spec.js:16600:31)
    at replayUnitOfWork (src/Example.spec.js:31930:5)
    at renderRoot (src/Example.spec.js:32733:11)
    at performWorkOnRoot (src/Example.spec.js:33572:7)
    at performWork (src/Example.spec.js:33480:7)
    at performSyncWork (src/Example.spec.js:33452:3)
    at requestWork (src/Example.spec.js:33340:5)
    at scheduleWork (src/Example.spec.js:33134:5)

导致重复报告的原因是什么？

为什么这会发生在 React 16+ 而不是 React 15？

我该如何解决这个问题？

Answer 1

可能存在竞争条件，因为使用ref 函数解决了一个promise。收到组件 ref 并不意味着初始渲染已经完成。

正如the reference 所说，

如果您需要对根 ReactComponent 实例的引用，首选的解决方案是将回调 ref 附加到根元素。

解决promise的正确方法是使用render回调参数，

如果提供了可选的回调，它将在组件渲染或更新后执行。

应该是：

async function mount(props) {
  return new Promise(resolve => {
    ReactDOM.render(<Example {...props} />, $container, resolve)
  })
}

该问题不会出现在第二次测试中，无论是否有第二次测试，它都会出现在第一次测试中，并且不是特定于 React 16.5。 它特定于 React 开发模式的工作原理。

这里是a simplified demo，不包括摩卡因素。预期的错误是 console.warn 输出，但两个 Error: Cannot read property 'bar' of undefined 错误是 console.error，它们是由 React 本身输出的。 ReactDOM.render 运行组件render 函数两次，并从第一次测试异步输出错误。

The same demo 与 React 的生产版本同步显示单个 Error: Cannot read property 'bar' of undefined 错误，正如预期的那样。渲染失败不会使ReactDOM 渲染被拒绝，错误可能是caught by error boundary component if needed：

class EB extends Component {
  componentDidCatch(err) {
    this.props.onCatch(err);
  }

  render() {
    return this.props.children;
  }
}

async function mount(props) {
  return new Promise((resolve, reject) => {
    ReactDOM.render(<EB onCatch={reject}><Example {...props} /></EB>, $container, resolve)
  })
}

最好不要在单元测试中依赖 React DOM 渲染器。 Enzyme 服务于这个目的，允许独立地同步测试组件，尤其是shallow wrapper。

Answer 2

似乎 React 16+ 在渲染过程中会出现未捕获的错误，即使在包装器中使用 componentDidCatch 也是如此。这意味着 Mocha 将因未捕获的错误而使测试失败，然后继续下一个测试，之后组件的第二次渲染将完成并解决 promise，运行一个断言。这在当前正在进行的测试中运行，导致本示例中看到的双重成功。

An issue 已通过 Github 上的 React 存储库打开。