reactjs - 实现 Redux 后基本 React 测试失败

Question

我正在尝试练习使用 Redux/测试 React，并使用 Facebook Create-React 设置了一个简单的应用程序工具包。

我有一个基本测试，旨在确保元素呈现:

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render( < Companies / > , div);
});

直到我在那个元素中实现了 Redux，它才过去，就像这样:

function select(state) {
  return {companies: state};
}

export default connect(select)(Companies);

现在，尽管该元素肯定会在浏览器中呈现，并且 redux 实现工作正常，但我在测试结果中收到此消息:

Invariant Violation: Could not find "store" in either the context or props of "Connect(Companies)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Companies)".

我以为我已经在我的 route 这样做了:

let store = createStore(companyApp);

ReactDOM.render(
  <Provider store={store}>
   <Router history={browserHistory}>
      <Route path="/" component={App}>
        <Route path="/companies" component={Companies}>
            <Route path=":id" component={Company}/>
        </Route>
     < /Route>
   </Router>
 </Provider>, document.getElementById('root'));

但我一定遗漏了什么。

Answer 1

发生这种情况是因为 Companies 组件是一个连接组件。 当您尝试在测试中呈现连接的组件时，它会警告您不存在商店。要解决这个问题，您可以将 Companies 组件包装在 Provider 中，并使用专门为测试制作的商店，或者，如果您只想测试组件的呈现而不用担心 redux 存储，您可以像这样显式导出原始组件:

export class Companies {
  ...
}

export default connect(select)(Companies);

在你的测试中

import { Companies } from ./Companies

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render( < Companies companies={[]} / > , div);
});

这里更详细地描述了测试连接的组件 http://redux.js.org/docs/recipes/WritingTests.html#connected-components