Question

使用适当的提供程序包装React组件后，仍然无法在jest测试环境中找到该商店。是否有我所缺少的东西，或者还有其他更清洁的方式来解决这个问题？

这是对其他商店有用的做法，并且我已将其与其他组件一起使用，所以我看不出为什么这不起作用的原因。渲染器应该创建一个包装有TextContext的对象，该对象需要从TextContext中读取才能填充字段。

上下文

import { connect } from 'react-redux';
import React, { createContext } from 'react';

export const TextContext = createContext({});

export function TextProvider({ children, text }) {
  return <TextContext.Provider value={text}>{children}</TextContext.Provider>;
}

export const TextConsumer = TextContext.Consumer;

function renderComposition(props) {
  const text = {
    ... // some text objects
  };
  return (
    <TextProvider text={text}>
      <Composition {...props} />
    </TextProvider>
  );
}

目标失败行

beforeEach(() => {
...
   subject = mount(renderer.create(renderComposition(props)));
...
)};

错误

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

Answer 1

我想您的组件需要模拟存储，您可以通过创建mockReduxState.js

来提供

import configureMockStore from "redux-mock-store";

export const createMockStore = state => configureMockStore()(state);

通过嘲笑商店更新失败的测试。

beforeEach(() => {
...
 let updatedProp = {...props, store:createMockStore};
   subject = mount(renderer.create(renderComposition(updatedProp)));
...
)};

Answer 2

原来问题不相关，我正在导入组件而不是连接的容器，因此商店从未设置。名字是成功的一半。嘲笑store选项也是处理此问题的好方法?感谢paragxvii

在Jest中使用上下文提供程序包装组件后，“找不到商店”

2 个答案: