Question

我在为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
  });
});

Answer 1

首先，问题看起来更像是你的组件，所以如果没有发布至少你的渲染方法，可以说不多。

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

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

Answer 2

我的想法是调用new Car（）只调用构造函数而不是render方法，这意味着组件不会开始挂载（请参阅生命周期文档https://facebook.github.io/react/docs/component-specs.html）。所以警告意味着“嘿，你的组件没有开始安装，你想怎么设置状态，它有什么不对”。

如果你可以使用TestUtils，你可以使用

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

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

2 个答案: