反应/Redux 测试 - 在上下文或 props 中都找不到"store"

Question

我是React/redux的新手，只是开始使用Chai测试我的第一个应用程序。我正在使用redux-form/不可变和反应 - 我不确定如何在测试时解决此问题：

  1) Login
       renders a login form:
     Invariant Violation: Could not find "store" in either the context or props of "Connect(Form(LoginForm))". Either wrap the root component in a <Provider>, or explicitly pass "st
ore" as a prop to "Connect(Form(LoginForm))".

我发现了这个问题：https：//github.com/reactjs/react-react-readux/issues/57似乎是同一问题问题。

index.jsx

import {configRoutes} from './config'
ReactDOM.render(
  <Provider store={store}>
    <Router history={hashHistory}>{configRoutes()}</Router>
  </Provider>,
  document.getElementById('app')
);

config.js

import App from './App';
import {PackageStoreContainer} from './components/Package/PackageContainer';
import {LoginStoreContainer} from './components/Login/LoginContainer';
export function configRoutes() {
  const routes = <Route component={App}>
    <Route path="/packages" component={PackageStoreContainer} />
    <Route path="/" component={LoginStoreContainer} />
  </Route>;
  return routes;
}

logincontainer.jsx

export class LoginContainer extends React.Component {
  constructor(props, context) {
    super(props, context);
    sessionStorage.removeItem('credentials');
  }
  submit = values => {
    this.props.dispatch(loginUser(values));
  }
  render() {
    return (
      <div className="row">
        <LoginForm onSubmit={this.submit} />
      </div>
    );
  }
};
const mapStateToProps = (state, ownProps) => {
  return {
    creds: {}
  };
}
export const LoginStoreContainer = connect(mapStateToProps)(LoginContainer);

loginform.jsx

const required = value => (value ? undefined : 'Required');
const renderField = ({input, label, type, meta: {touched, error, warning}}) => (
  <div>
    <ControlLabel htmlFor="email">{label}</ControlLabel>
    <div>
      <input {...input} placeholder={label} type={type} className="form-control" />
      {touched &&
        ((error && <span>{error}</span>) ||
          (warning && <span>{warning}</span>))}
    </div>
  </div>
);
const LoginForm = (props) => {
    const { handleSubmit } = props
    return (
      <Col xs={12} md={12}>
        <form onSubmit={handleSubmit}>
          <FormGroup>
            <Field
              name="username"
              type="email"
              component={renderField}
              label="Username"
              validate={[required]}
            />
          </FormGroup>
          <FormGroup>
            <Field
              name="password"
              type="password"
              component={renderField}
              label="Password"
              validate={[required]} />
          </FormGroup>
          <button type="submit" className="btn btn-primary">Submit</button>
        </form>
      </Col>
    );
};
export default reduxForm({
  // a unique name for the form
  form: 'login'
})(LoginForm)

login_spec.js

describe('Login', () => {
  it('renders a login form', () => {
    const component = renderIntoDocument(
      <LoginContainer />
    );
    const fields = scryRenderedDOMComponentsWithTag(component, 'input');
    const submit = scryRenderedDOMComponentsWithTag(component, 'button');
    // expect(fields.length).to.equal(3);
    // expect(submit.length).to.equal(1);
  });
});

fix

import {Provider} from 'react-redux';
const createMockStore = (getState) => {
    const middlewares = [];
    return configureStore(middlewares)(getState);
};
const store = createMockStore();
const component = renderIntoDocument(
   <Provider store={store}>
      <LoginContainer />
   </Provider>
);

Answer 1

logincontainer是连接的组件connect(mapStateToProps)(LoginContainer)。这意味着它取决于Redux Store来生成子树，并且在测试时，您没有包装<Provider store={store} />。

解决方案是使用redux-mock-store：

import configureStore from 'redux-mock-store';
const mockStore = configureStore();
const component = renderer.create(
   <Provider store={mockStore()}>
      <LoginContainer />
   </Provider>
);

Answer 2

连接组件时，connect函数试图在父层次结构中找到使用存储的提供商。如果找不到它会引发错误。

• 简单的解决方案是将每个测试组件与提供商包装。

    import reducers from "reducerPath"
    import {Provider} from "react-redux"
    import {createStore} from "redux"
    <Provider store={createStore(reducers,{})} >
        <LoginComponent/>
    </Provider>
  

这将解决问题，但它很昂贵，因为您必须为每个组件设置此问题

• 简单的方法是改变您渲染应用程序的方式。而不是在index.jsx中：

  ReactDOM.render(
    <Provider store={store}>
      <Router history={hashHistory}>{configRoutes()}</Router>
    </Provider>,
     document.getElementById('app')
  );
  

首先创建包装器组件：

    import reducers from "reducerPath"
    import {Provider} from "react-redux"
    import {createStore} from "redux"

   export default (props)=>{
      <Provider store={createStore(reducers,{})}>
          {props.children}       
      </Provider>
    }

然后index.jsx

  import Wrapper from "./wrapper.jsx"
  ReactDOM.render(
    <Wrapper>
      <Router history={hashHistory}>{configRoutes()}</Router>
    </Wrapper>,
     document.getElementById('app')
  );

现在在测试中，您可以使用此Wrapper组件包装测试组件，而不是依赖于Anoter第三方库：

const component = renderIntoDocument(
   <Wrapper store={store}>
      <LoginContainer />
   </Wrapper>
);