如何使用 Redux connect 中的操作对测试组件进行快照？

Posted 2023-02-22

【中文标题】如何使用 Redux connect 中的操作对测试组件进行快照？

【英文标题】：How do you snapshot test components with actions from Redux connect?

【发布时间】：2017-10-03 09:49:57

【问题描述】：

我想对在其 componentDidMount() 处理程序中调度 redux 操作的反应组件进行快照测试。动作是通过 Redux 的connect() 给组件的。

我应该如何模拟这个动作？

现在该操作已导入组件中（请参阅下面的 Newsfeed.js）。那么在我的测试中如何将它换成模拟动作呢？

我正在使用 redux-thunk 进行异步操作，但这并不重要。

app/components/Newsfeed.js

import React,  Component  from 'react';
import  connect  from 'react-redux';

// An action that makes an async request to get data
import  loadNewsfeedStories  from '../actions/Newsfeed';

class Newsfeed extends Component 
  componentDidMount()
    this.props.loadNewsfeedStories();
  

  ...


export default connect(state => (
  stories: state.newsfeed.stories
),

  loadNewsfeedStories
)(Newsfeed)

app/tests/Newsfeed.test.js

import React from 'react';
import  Provider  from 'react-redux';

// This creates a mockStore using my reducers and a saved JSON state.
import  mockStore  from './MockState';

// The component to test
import Newsfeed from '../components/Newsfeed';

test('Newsfeed matches snapshot', () => 
  const wrapper = mount(
    <Provider store=mockStore>
      <Newsfeed />
    </Provider>
  );

  expect(wrapper).toMatchSnapshot();
);

可能的解决方案

导出未连接的组件，并手动传入所有道具和模拟动作。与仅使用 mockStore 和提供程序相比，将需要大量额外的编码。此外，我们不会测试“已连接”组件。

使用类似Nock的东西？似乎拦截了 HTTP 调用，因此 ajax 请求实际上不会去任何地方。

对于axios，有一个叫moxios的lib——https://github.com/mzabriskie/moxios

【参考方案1】：

您可以尝试导出不同的连接组件，但要使用模拟的“mapDispatchToProps”函数。这样，任何操作都不会通过。

但就个人而言，在测试组件时。我写了一个模拟 reducer，这些不应该改变状态，而是记录所有调度的动作（Jests 模拟函数对此非常有用）。这样，您还可以测试单击按钮时是否调度了正确的操作，...

【参考方案2】：

同时测试组件、redux 存储和模拟 http 请求是个坏主意，因为单元测试应该很小。

另一种选择是避免在componentDidMount 中执行业务逻辑。 而不是写

componentDidMount() this.props.loadNewsfeedStories();

您可以将此逻辑移至 redux 模块（取决于您使用的库）。 如果你只使用 redux-thunk 而没有像 saga 或 redux-logic 这样的库，你可以使用这个https://github.com/Rezonans/redux-async-connect。

但记录所有派发的动作

Redux thunk 很难测试。您的模拟调度程序将仅接收一组函数。而且您无法验证函数是由loadNewsfeedStories() 还是由someAnotherThunk() 创建的。