酶测试中缺少上下文功能

Question

So I'm using Enzyme to render a component with a bunch of context:

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

However, when I start trying to use said context, I find that only a single function is there, ie

console.log(wrapper.context())

yields

{ getStore: [Function: getStore] }

rather than all the functions. Indeed, if I try to do

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

I get an error:

TypeError: wrapper.context(...).assetUrl is not a function

while this works fine:

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

Answer 1

What version of enzyme are you on?

Shallow takes an options param and there are some predefined options that it honors, but I don't see a context object: https://github.com/airbnb/enzyme/blob/master/src/shallow.js

How are you expecting the context object to be used exactly?

Answer 2

You probably need to provide more code to help diagnose this. Where is the console.log statement you quote above being called from, for example?

Making some assumptions, you should check what Dashboard.contextTypes contains. If it contains only getStore: PropTypes.function, that may explain why you only see that in the shallow render. If the other properties are used by components that wrap dashboard (eg a wrapper), the code where console.log is being called may not be getting the whole context you're passing into shallow(), because as I understand it, React only provides the objects from context that are defined in the component's contextTypes static method.