如何测试 React/Flux 组件状态？答案

【问题标题】：How to test React/Flux components state?如何测试 React/Flux 组件状态？
【发布时间】：2016-08-08 00:24:53
【问题描述】：

我对测试很陌生，所以也许我正在考虑测试不应该测试的东西。

我有一个顶级组件“App”，它从商店获取它的状态，该状态通过组件安装时的 ajax 请求进行更新。我认为一个有用的测试是在发出 ajax 请求（操作）后检查 App 组件的状态是否为空。有没有办法在动作前后测试组件的状态？

据我了解，您不会测试应用程序的实际功能，而是模拟组件及其功能，然后对其进行测试。如果这有效，您假设您的实际应用程序必须有效。我不确定如何模拟链接到操作和商店的组件。

如果我不应该测试状态，那么测试组件有什么好处？到目前为止，还没有真正的用户交互。

这是没有存储/操作代码的组件代码：

import React from 'react';
import {Component} from 'react';
import {FETCH_DATA} from '../actions/types';
import MapStore from '../stores/MapStore';
import dispatcher from '../dispatcher';
import * as MapActions from '../actions/index';


export default class App extends Component {
  constructor() {
     super();

this.state = {
  meteorites: MapStore.getAll()
}

// Bind methods to 'App'
this.updateData = this.updateData.bind(this);

}

componentWillMount() {

  // fetch initial meteorites on page load
  this.fetchData();

  // if change event was emitted, re-render component
  MapStore.on('change', this.updateData);

}

fetchData() {
  // Kick off a fetchData action (api request)
  MapActions.fetchData();
}

componentWillUnmount() {
  MapStore.removeListener('change', this.updateData);
}

updateData() {
 this.setState({
   meteorites: MapStore.getAll()
 });
}

render() {

  //console.log("state", this.state.meteorites);

  return (
    <div className="app-container">Meteorite Landings</div>
  );
 }
}

【问题讨论】：

标签： ajax testing reactjs mocha.js flux

【解决方案1】：

如果您想了解有关深入测试的更多信息，我推荐"Growing Object-Oriented Software, Guided by Tests"

具体与 React/Redux 相关，Redux 文档有一些关于测试 Redux 的信息：

http://redux.js.org/docs/recipes/WritingTests.html

对于其他面向 React 的测试，您可以查看 Enzyme 和 Jest

另见

https://ifelse.io/2016/04/04/testing-react-components-with-enzyme-and-mocha/

【讨论】：