标签: redux-mock-store

我正在尝试使用react,redux-mock-store和redux编写一些测试,但我不断得到并且错误.也许是因为我Promise尚未解决？

fetchListing()当我在开发和生产上尝试它时,动作创建者实际上工作,但是我在测试通过时遇到了问题.

错误信息

(node:19143) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 3): SyntaxError
(node:19143) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
 FAIL  src/actions/__tests__/action.test.js
  ? async actions › creates "FETCH_LISTINGS" when fetching listing has been done

    TypeError: Cannot read property 'then' of undefined

      at Object.<anonymous> (src/actions/__tests__/action.test.js:44:51)
          at Promise (<anonymous>)
      at Promise.resolve.then.el (node_modules/p-map/index.js:42:16)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:169:7)

  async actions
    ? …

如何覆盖react测试库中的延迟加载组件。

import React, {lazy} from 'react';
const ownerInfo = lazy(() => import('../abc'))

const compone = () => {
  return <Suspense><abc /></Suspense>
}
export default compone

测试规范.js

 import React from 'react'
 import {render, fireEvent} from '@testing-library/react'
 import configureStore from 'redux-mock-store'

 ...

我正在尝试测试具有异步调用的操作.我使用Thunk作为我的中间件.在下面的操作中,如果服务器返回OK响应,我只会调度和更新存储.

export const SET_SUBSCRIBED = 'SET_SUBSCRIBED'

export const setSubscribed = (subscribed) => {
  return function(dispatch) {
    var url = 'https://api.github.com/users/1/repos';

    return fetch(url, {method: 'GET'})
      .then(function(result) {
        if (result.status === 200) {
          dispatch({
            type: SET_SUBSCRIBED,
            subscribed: subscribed
          })
          return 'result'
        }
        return 'failed' //todo
      }, function(error) {
        return 'error'
      })
  }
}

我在编写测试时遇到问题,调试要么调用调用,要么不调用(取决于服务器响应),或者我可以让调用操作并检查存储中的值是否正确更新.

我使用fetch-mock来模拟web的fetch()实现.但是,看起来我的代码块then不会执行.我也试过在这里使用这个例子没有运气 - http://redux.js.org/docs/recipes/WritingTests.html

const middlewares = [ thunk ]
const mockStore = configureStore(middlewares)

//passing test
it('returns SET_SUBSCRIBED type and subscribed true', () => { …

有非常简单的组件：

从 'prop-types' 导入 PropTypes 从 'react' import { connect } from 'react-redux'

class MyComponent extends React.Component {
  componentWillMount() {
    if (this.props.shouldDoSth) {
      this.props.doSth()
    }
  }

  render () {
    return null
  }
}

MyComponent.propTypes = {
  doSth: PropTypes.func.isRequired,
  shouldDoSth: PropTypes.bool.isRequired
}

const mapStateToProps = (state) => {
  return {
    shouldDoSth: state.shouldDoSth,
  }
}

const mapDispatchToProps = (dispatch) => ({
  doSth: () => console.log('you should not see me')
})

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

我想测试 ifdoSth被调用 when shouldDoSthis equal …

我在我的测试套件的组件中设置 Redux 存储时遇到了一些问题。问题是，即使我尝试未连接的挂载，测试也会在查找 authState 变量时引发错误。我有以下组件：

import React, { Component } from 'react';
import { Link, Redirect } from "react-router-dom";
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as authActions from '../../../actions/auth.actions';

export class PasswordReset extends Component {
    constructor(props) {
        super(props);
        this.state = {
            email: '',
            emailConfirm: '',
            message: ""
        };
    }

    handleChange = e => {
        e.preventDefault();
        const { value, name } = e.target;

        if (name === 'email') {
            this.setState({...this.state, email: value.trim()});
        } else if (name === 'secondary') …

我有以下显示通知的操作，然后将其删除，我正在尝试为此编写一个单元测试，但似乎无法弄清楚如何模拟setTimeout。

export const addNotification = (text, notificationType = 'success', time = 4000) => {
        return (dispatch, getState) =>{
            let newId = new Date().getTime();
            dispatch({
                type: 'ADD_NOTIFICATION',
                notificationType,
                text,
                id: newId
            });
            setTimeout(()=>{
                dispatch(removeNotification(newId))
            }, time)
        }
    };
    export const removeNotification = (id) => (
    {
        type: 'REMOVE_NOTIFICATION',
        id
    });

遵循redux网站上有关异步测试的教程，我提出了以下测试：

    import * as actions from '../../client/actions/notifyActionCreator'
    import configureMockStore from 'redux-mock-store'
    import thunk from 'redux-thunk'

    const middlewares = [ thunk ];
    const mockStore = configureMockStore(middlewares);


    describe('actions', ()=>{

        it('should create an action …

有什么方法可以从redux-mock-store创建的商店中正确调度Thunk吗？现在我被迫使用任何类型断言

store.dispatch<any>(getCommissions());

如dispatch预期的那样提供简单的操作

[ts]
Argument of type '(dispatch: ThunkDispatch<IRootState, undefined, 
AnyAction>, getState: () => IRootState) => void' is not assignable to parameter of type 'AnyAction'.
Property 'type' is missing in type '(dispatch: ThunkDispatch<IRootState, undefined, AnyAction>, getState: () => IRootState) => void'.

的代码片段 getCommisions()

export function getCommissions() {
  return (dispatch: ThunkDispatch<IRootState, undefined, AnyAction>, getState: () => IRootState) => { ... }

我打开了一个问题，但以防万一我做错了：

使用 jest 和 redux-mock-store 编写单个测试时，一切都按预期进行。但是如果我多次使用 mockStore（在同一个测试中甚至在另一个测试中），那么在任何创建的商店中分派的动作会在 observable 中多次发送（但在商店中只发送一次，如 store.getActions()状态。

这是一个复制仓库：https : //framagit.org/jalil/redux-observable-mock-store-duplicate

tldr;

这有效：

const store = mockStore();
store.dispatch({ type: 'FOO' }); // -> Observable get 1 FOO action

这不会：

const store = mockStore();
store2 = mockStore();
mockStore();
store.dispatch({ type: 'FOO' }); // => Observable get 3 FOO actions

或者 ：

const store = mockStore();
store2 = mockStore();
mockStore();
mockStore();
mockStore();
store.dispatch({ type: 'FOO' }); // -> Observable get 5 FOO actions

... 等等 ...

我期望，当我使用 replaceEpic 和 …