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

我以为我已经在我的路线上做了这个：

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

更详细地描述了测试连接组件

实现Redux后基本的React测试失败

1 个答案: