Question

我正在尝试测试我的React / Redux应用程序的连接组件，并且我写了一些测试用例实际上会抛出错误：

List<String> words = Arrays.asList(input.split(" "));

String shortestWord = words.stream().min(
                                     Comparator.comparing(
                                     word -> word.length()))
                                    .get();

System.out.println(shortestWord);

出现错误App component › shows account info and debits and credits` Invariant Violation: Could not find "store" in either the context or props of "Connect(AccountInfo)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(AccountInfo)".的测试用例如下。我的问题是我不明白我应该在app.test.js处包装什么，因为我在这里没有使用Connect()：

AccountInfo

我的import React from 'react'; import { mount } from 'enzyme'; import { Provider } from 'react-redux'; import App from './App'; import * as actions from '../../actions'; function setup() { const props = { errorMessage: null, actions }; const enzymeWrapper = mount(<App {...props} />); return { props, enzymeWrapper, }; } describe('App component', () => { it('shows account info and debits and credits`', () => { const {enzymeWrapper} = setup(); expect(enzymeWrapper.find('.account-info').exists()).toBe(true); expect(enzymeWrapper.find('.debits-and-credits').exists()).toBe(true); }); it('shows error message', () => { const {enzymeWrapper} = setup(); enzymeWrapper.setProps({ errorMessage: 'Service Unavailable' }); expect(enzymeWrapper.find('.error-message').exists()).toBe(true); }); });：

containers/app.js

组件import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import * as actions from '../actions'; import AppComponent from '../components/App/App'; const mapStateToProps = state => ({ isFetching: state.balance.isFetching, errorMessage: state.errorMessage, }); const mapDispatchToProps = dispatch => ({ actions: bindActionCreators(actions, dispatch), }); const AppContainer = connect(mapStateToProps, mapDispatchToProps)(AppComponent); export default AppContainer;：

app.js

UPD：

我更新了我的测试用例，现在看起来像：

import React, { Component } from 'react';
import ErrorMessage from '../../containers/ErrorMessage';
import AccountInfo from '../../containers/AccountInfo';
import DebitsAndCredits from '../../containers/DebitsAndCredits';
import './App.css';

const AppComponent = () =>
  <div className="app">
    <AccountInfo />
    <DebitsAndCredits />
  </div>;

export class App extends Component {
  componentWillMount() {
    const { actions } = this.props;
    actions.fetchBalance();
  }

  render() {
    const { errorMessage } = this.props;
    return errorMessage ? <ErrorMessage /> : <AppComponent />;
  }
}

export default App;

现在我的错误是：

import React from 'react';
import { mount } from 'enzyme';
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import createSagaMiddleware from 'redux-saga';
import { initialState } from '../../reducers/balance/balance';
import App from './App';
import * as actions from '../../actions';

const middlewares = [createSagaMiddleware];
const mockStore = configureMockStore(middlewares);
const store = mockStore(initialState);

function setup() {
  const props = {
    errorMessage: null,
    actions,
  };

  const enzymeWrapper = mount(
    <Provider store={store}>
      <App {...props} />
    </Provider>
  );

  return {
    props,
    enzymeWrapper,
  };
}

describe('App component', () => {
  it('shows account info and debits and credits`', () => {
    const { enzymeWrapper } = setup();
    expect(enzymeWrapper.find('.account-info').exists()).toBe(true);
    expect(enzymeWrapper.find('.debits-and-credits').exists()).toBe(true);
  });

  it('shows error message', () => {
    const { enzymeWrapper } = setup();
    enzymeWrapper.setProps({ errorMessage: 'Service Unavailable' });
    expect(enzymeWrapper.find('.error-message').exists()).toBe(true);
  });
});

UPD 2：

我在创建模拟商店时添加的App component › shows account info and debits and credits` TypeError: Cannot read property 'account' of undefined：

initialState

我的const initialState = { isFetching: false, account: {}, currency: '', debitsAndCredits: [], };组件：

AccountInfo

Answer 1

为了测试连接组件，您还需要模拟提供程序，因为connect从redux store中选择状态变量。

这样做

const enzymeWrapper = mount (<Provider store={mockStore}><App {...props}/></Provider>)

你也需要模拟redux商店。

编辑1：

只需查看您的AccountInfo组件，就会告诉我您希望在此处使用道具帐户。</ p>

AccountInfo = ({account}) =>

这意味着App.js必须传递道具中的帐户值。货币也是如此。

在React / Redux中测试连接的组件

1 个答案: