Question

我想快照测试一个在其componentDidMount()处理程序中调度redux操作的react组件。该操作通过Redux的connect()。

提供给组件

我该如何模仿行动？

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

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

应用/组件/ 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)

应用/测试/ 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();
});

可能的解决方案

导出未连接的组件，并手动传入所有道具＆amp;模拟行为。与仅使用mockStore＆amp; amp;相比，将会有很多额外的编码。供应商。我们也不会测试连接的＆＃39;成分
使用Nock之类的内容？似乎拦截HTTP调用，因此ajax请求实际上不会去任何地方。
对于axios，有一个名为moxios的库 - https://github.com/mzabriskie/moxios

Answer 1

你可以尝试导出一个不同的连接组件，但是使用模拟的＆＃34; mapDispatchToProps＆＃34;功能。这样，任何行动都无法通过。

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

Answer 2

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

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

componentDidMount(){ this.props.loadNewsfeedStories(); }

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

但记录所有已发送的操作

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

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

2 个答案: