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

我想对react组件进行快照测试，该组件在其

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)

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

app/tests/Newsfeed.test.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)

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

从“React”导入React；
从'react redux'导入{Provider}；
//这将使用my Reducer和保存的JSON状态创建一个mockStore。
从“/MockState”导入{mockStore}；
//要测试的组件
从“../components/Newsfeed”导入新闻源；
测试（'Newsfeed匹配快照'，（）=>{
常量包装器=装入(
);
expect（wrapper.toMatchSnapshot（）；
});

可能的解决方案

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)

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&provider相比，将需要大量额外的编码。此外，我们不会测试“已连接”组件

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

对于axios，有一个称为moxios-

---

您可以尝试导出另一个连接的组件，但要使用模拟的“mapDispatchToProps”函数。这样，任何行动都无法通过

---

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

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

另一种选择是避免在

componentDidMount

中执行业务逻辑
而不是写作

componentDidMount（）{
this.props.loadNewsfeedStories（）；
}

您可以将此逻辑移动到redux模块（取决于您使用的libs）。 如果您只使用redux thunk，而不使用saga或redux logic之类的库，那么您可以使用它

但记录所有已发送的操作

重击很难测试。您的模拟调度程序将只接收一个函数数组。您无法验证函数是由

loadNewsfeedStories（）

还是由

someAnotherThunk（）

创建的