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

Posted 2023-02-22

【中文标题】如何测试 React/Flux 组件状态？

【英文标题】：How to test React/Flux components state?

【发布时间】：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>
  );
 

【参考方案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/