React/Redux 测试 - 在上下文或 props 中找不到“store”

Question

我是 React/Redux 新手，刚刚开始使用 chai 测试我的第一个应用程序。我正在使用redux-form/immutable和react-router，并且我不确定在测试时如何解决这个问题：

  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-redux/issues/57这似乎是同样的问题，但添加将子项返回到 Router 元素的函数的解决方案并不能解决问题。

索引.jsx

import {configRoutes} from './config'

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

配置文件

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;
}

登录容器.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);

登录表单.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);
  });
});

使固定

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 存储来生成子树，并且在测试时您没有<Provider store={store} />对其进行包装。

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

import configureStore from 'redux-mock-store';
const mockStore = configureStore();

const component = renderer.create(
   <Provider store={mockStore()}>
      <LoginContainer />
   </Provider>
);