How to traverse a shallow component nested in ThemeProvider HOC?

问题

Following up the issue on Github, I have a component Comp that when exported, is wrapped with injectSheet from reactjss. Please see the setup on codesandbox.

In a unit test, I'd like to assert that that component contains <a>, which it does (see codesandbox), but the test fails regardless:

describe("<Comp /> component", () => {
  const wrapper = shallow(<Comp />);

  it("should render a <a>", () => {
    expect(wrapper.find('a')).to.have.length(1);
  });
});

I get Error: [undefined] Please use ThemeProvider to be able to use WithTheme. So my natural (perhaps not the correct?) reaction was to wrap the component with ThemeProvider:

const wrapper = shallow(
  <ThemeProvider theme={{}}>
    <Comp />
  </ThemeProvider>
)

Then I get AssertionError: expected { length: 0 } to have a length of 1 but got 0.

I tried a whole slew of approaches, including calling dive, find or first with an extra shallow call, but I would always end up with Please use ThemeProvider to be able to use WithTheme:

// 1. dive(), as suggested in
// https://github.com/cssinjs/react-jss/issues/30#issuecomment-268373765
expect(wrapper.dive('Comp')).to.have.length(1);
expect(wrapper.dive('Comp').find('a')).to.have.length(1);
expect(wrapper.dive().find('a')).to.have.length(1);

// 2. find() / first(), as suggested in https://github.com/airbnb/enzyme/issues/539
expect(wrapper.find(Comp).shallow().find('a')).to.have.length(1);
expect(wrapper.first().shallow().find('a')).to.have.length(1);

Any ideas here? I am a bit new to unit testing with React, so I would appreciate if someone could enlighten me on this ;)

回答1:

For anyone still struggling with this, one viable approach was suggested on GitHub. Instead of testing the styled component wrapped with injectSheet HOC, you export your stand-alone component and test it in isolation

// Component.js
import React from 'react'
import injectSheet from 'react-jss'

const styles = {
  color: 'burlywood'
}

// named export for unit tests
export const Component = props => <h1>Component</h1>

// default export to be used in other components
export default injectSheet(styles)(Component)

which would work for most use cases, since more often than not, you need to unit test the plain component and its logic, and not any of its associated styling. So in your unit test just do

import { Component } from './Component'

instead of (which you would do in the rest of your codebase)

import Component from './Component'

来源：https://stackoverflow.com/questions/47704909/how-to-traverse-a-shallow-component-nested-in-themeprovider-hoc

标签

javascript

reactjs

enzyme

jss