如何为ES6类React组件创建Chai/Mocha单元测试

Question

我在为ES6类创建Chai/Mocha单元测试时遇到问题。这个项目被正确配置为使用chai/mocha、ES6、babel，所以这不是问题所在。（我可以运行一个虚拟测试，检查两个变量是否相同）。只有当我尝试使用下面的ES6类React组件时，才会出现错误。我使用命令npm-test运行测试。我的package.json被配置为在运行npm测试:时运行此命令

mocha --compilers js:babel/register file/path/to/spec --recursive

我得到这个错误：

警告：setState（…）：只能更新已安装或正在安装的组件。这通常意味着您对未安装的组件调用了setState（）。这是一个禁忌。请检查组件的代码

ES6类React组件看起来像（显然不是全部）：

import ...
class Car extends React.Component {
  constructor() {
    super();
    this.state = {
      color: ''
    }
  }
  setColor(color) {
     this.setState({ color : color });
  }
  render() {
    .......
  }
}

测试/规范JS文件看起来（大部分类似）：

import ...
let should = chai.should();
describe('Car Test', () => {
  let car;
  beforeEach(() => {
    car = new Car();
  });
  it('should be red', () => {
    car.setColor('red'); // pretty sure THIS is throwing the error
  });
});

Answer 1

我的想法是调用new Car（）只调用构造函数，而不调用render方法，这意味着组件不会开始挂载（请参阅生命周期文档https://facebook.github.io/react/docs/component-specs.html)。因此，警告的意思是"嘿，你的组件没有开始安装，你为什么要设置State，它有问题"。

如果你可以使用TestUtils，你可以有类似的东西

var car = TestUtils.renderIntoDocument(
   <Car />
);

Answer 2

首先，问题看起来更具体地针对您的组件，所以如果不发布至少您的渲染方法，就没什么好说的。

否则，一个快速的解决方案是检查您的组件是否已安装，如下所示：

componentWillUnmount() {
   this.isUnmounted = true;
}
setColor(color) {
   if (!this.isUnmounted) {
      this.setState({ color : color });
   }
}

其他解决方案可以使用try-catch：

setColor(color) {
   try {
    this.setState({ color : color });
    return true;
  } catch (e) {
    return false;
  }
}