如何爲ES6類React組件創建Chai/Mocha單元測試？

我在爲ES6類創建Chai/Mocha單元測試時遇到了麻煩。這個項目配置正確，使用chai/mocha，ES6，babel，所以這不是問題。（我可以運行一個虛擬測試，檢查兩個變量是否相同）。僅當我嘗試使用下面的ES6類React組件時，纔會引發該錯誤。我使用命令npm test運行測試。我的package.json配置爲運行該命令時，我跑NPM測試：如何爲ES6類React組件創建Chai/Mocha單元測試？

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

來源

2016-08-01 eltigre

我的想法是調用new Car（）只是調用構造函數而不是渲染方法，這意味着組件不會啓動安裝（請參閱生命週期文檔https://facebook.github.io/react/docs/component-specs.html）。所以警告的意思是「嘿，你的組件沒有開始安裝，你怎麼想setState，它有什麼問題」。

如果你都OK使用TestUtils，你可以像

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

來源

2016-08-01 12:14:31 Vivian

所有問題首先看起來更具體到你的組件，所以沒有張貼至少你的渲染方法並不多，可以說。

否則速戰速決將是檢查你的組件是否安裝或沒有，像這樣：

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

來源

2016-08-01 07:35:23 Shota

如何爲ES6類React組件創建Chai/Mocha單元測試？

回答

相關問題