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

【问题标题】：How to create Chai/Mocha unit tests for a ES6 class React component?如何为 ES6 类 React 组件创建 Chai/Mocha 单元测试？
【发布时间】：2016-08-01 06:18:07
【问题描述】：

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

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
  });
});

【问题讨论】：

标签： unit-testing reactjs ecmascript-6 mocha.js chai

【解决方案1】：

我的想法是调用 new Car() 只是调用构造函数而不是渲染方法，这意味着组件不会开始挂载（参见生命周期文档https://facebook.github.io/react/docs/component-specs.html）。所以警告的意思是“嘿，你的组件没有开始挂载，你怎么要setState，它有问题”。

如果你对使用 TestUtils 没问题，你可以有类似的东西

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

【讨论】：

【解决方案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;
  }
}

【讨论】：