ES6クラスのChai/Mocha単体テストの作成方法React component？

Question

ES6クラスのChai/Mocha単体テストの作成に問題があります。このプロジェクトはchai/mocha、ES6、babelを正しく使用するように設定されているので、問題はありません。 （私は2つの変数が同じかどうかチェックするダミーのテストを実行できます）。エラーは、以下のES6クラスのReactコンポーネントを使用しようとするとスローされます。コマンドnpm testを使用してテストを実行します。私のpackage.jsonは私がNPMテストを実行すると、このコマンドを実行するように構成されています

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

私はこのエラーを取得しています：

警告：SETSTATE（...）：専用でマウントを更新することができますまたは取り付け部品を含む。これは、通常、アンマウントされたコンポーネントに対してsetState（）を呼び出したことを意味します。これはノーオペレーションです。 （それが明らかではないすべて）のように見えるの成分を反応させるのコンポーネント

ES6クラスのコードを確認してください：

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

新しいCar（）はレンダリングメソッドではなくコンストラクタを呼び出すだけです。つまり、コンポーネントがマウントを開始しません（ライフサイクルドキュメントhttps://facebook.github.io/react/docs/component-specs.htmlを参照）。だから、警告は "ねえ、あなたのコンポーネントがマウントを開始していない、どのようにsetStateにしたい、それは何か間違っている"と意味します。

あなたがTestUtilsを使用して[OK]をしている場合は、

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

のようなものを持つことができます

Answer 2

は、あなたのコンポーネントに、より具体的なことは次のようになります。

は、そうでない場合はクイックフィックスは、このように、あなたの部品が実装されているかどうかを確認するには、次のようになります。

componentWillUnmount() { 
    this.isUnmounted = true; 
} 

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

他のソリューショントライキャッチを使用することができます。私の考えは呼び出している

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