Question

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

<p id="textContainer"></p>

我发现了这个问题：https://github.com/reactjs/react-redux/issues/57这似乎是同样的问题，但添加一个将子项返回给Router元素的函数的解决方案并不能解决问题。

index.jsx

  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))".

config.js

import {configRoutes} from './config'

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

LoginContainer.jsx

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

LoginForm.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);

Login_spec.js

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)

修正

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

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

React / Redux测试 - 无法在上下文或道具中找到“store”

1 个答案: