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

我想快照测试一个反应组件，它在componentDidMount()处理程序中分派一个redux动作。该操作通过Redux的connect()提供给组件。如何使用Redux connect中的操作快照测试组件？

我该如何嘲笑这个动作？

现在的动作是在组件的进口（见下文Newsfeed.js）。那么，如何将我的测试中的模拟动作换掉？

我使用的终极版，形实转换为我的异步操作，但应该没有多大关系。

应用程序/组件/ 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(); 
});

可能的解决方案

导出未连接的组件，并手动传递所有道具&模拟操作。与仅使用mockStore &提供者相比，将会有很多额外的编码。我们也不会测试'连接'组件。
使用类似Nock？似乎拦截HTTP调用，所以Ajax请求实际上不会去任何地方。
对于爱可信，有一个lib称为moxios - https://github.com/mzabriskie/moxios

来源

2017-05-05 Don P

你可以尝试导出不同的连接成分，但有嘲讽 “mapDispatchToProps” 功能。这样，没有行动会通过。

但是，亲自测试组件时。我写了一个模拟reducer，它们不应该改变状态，但记录所有调度的动作（Jests模拟函数对此非常有用）。这样一来，你也可以测试是否点击一个按钮时，正确的动作布控，...

来源

2017-05-05 10:04:34

这是一个坏主意，同时测试组件，终极版存储和模拟HTTP请求，因为单元测试应该是小。

另一种选择是，以避免componentDidMount执行业务逻辑。
而是写

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

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

但记录所有派遣行动

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

来源

2017-05-28 09:52:10 sky

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

回答

相关问题