Question

所以我使用Enzyme来渲染具有大量上下文的组件：

const surveysByType = "test";
const wrapper = shallow(
  <Dashboard routeParams={{}} />,
  {
      context: {
          assetUrl: () => {
              return "https://www.example.com/broken.gif"
          },
          executeAction: () => {},
          getStore: (whatever) => {
              return {
                  getState: () => {
                      return {
                          _surveysByType: surveysByType,
                      };
                  },
                  on: () => {
                      return {};
                  }
              }
          },
          router: {
              createHref: () => {},
              go: () => {},
              goBack: () => {},
              goForward: () => {},
              isActive: () => {},
              push: () => {},
              replace: () => {},
              setRouteLeaveHook: () => {},
          },
          siteUrl: () => {
              return "https://www.example.com"
          },
      }
  }
);

然而，当我开始尝试使用上述语境时，我发现只有一个函数，即

console.log(wrapper.context())

产量

{ getStore: [Function: getStore] }

而不是所有的功能。的确，如果我尝试做的话

expect(wrapper.context().assetUrl())

我收到错误：

TypeError：wrapper.context（...）。asseturl不是函数

虽然这很好用：

expect(wrapper.context().getStore().getState())

Answer 1

你在使用什么版本的酶？

Shallow采用了一个选项参数，并且它有一些预定义的选项，但是我没有看到上下文对象：https://github.com/airbnb/enzyme/blob/master/src/shallow.js

您期望如何正确使用上下文对象？

Answer 2

您可能需要提供更多代码来帮助诊断此问题。您在上面引用的console.log语句在哪里被调用，例如？

做出一些假设，您应该检查Dashboard.contextTypes包含的内容。如果它只包含getStore：PropTypes.function，这可以解释为什么你只在浅层渲染中看到它。如果其他属性由包装仪表板的组件（例如包装器）使用，则调用console.log的代码可能无法获取您传入shallow（）的整个上下文，因为据我所知， React仅提供在组件的contextTypes静态方法中定义的上下文中的对象。

酶测试中的上下文缺失功能

2 个答案: