Wsrtjtyk

I want to make a wrapper function which could take a component as an argument and return it in rendered from with theme. Like below one. but it continued to throw error wrapper:

error : ShallowWrapper::dive() can only be called on components

beforeEach(() => {

      component = shallowWithTheme(<SomeComponent value />);

    });



    test('The text should be something text', () => {

      expect(component.text()).toBe('Something text');

    });

Wrapper function shallowWithTheme

   export const shallowWithTheme = (children, options) => {

      const wrapper = shallow(<ThemeProvider theme={theme}>{children}</ThemeProvider>, options).dive();

      return wrapper;     

    };

Edited

export const shallowWithTheme = (children, options) => {

  const wrapper = shallow(<ThemeProvider theme={theme}>{children}</ThemeProvider>, options);

  const instance = wrapper.root().instance();

  return wrapper.shallow({ context: instance.getChildContext() }).dive();

};

Error:

instance.getChildContext is not a function 

Update:

After doing hours of finding and hit and trial I ended up using following solution which I don't think is the right way to do it because you have to import your child component in order to find them and access their property. In previous method which is not working with current version. I was able to dive once from root level. So If I have to run a test on two child component I have to use like

expect(wrapper.find(SearchButton).dive().props().isDisabled).toBe(false);

          });



expect(wrapper.find(SearchInput).dive().props().isDisabled).toBe(false);

          });

util.js

 export const shallowWithTheme = children => (

      shallow(children, { theme })

    );

test.js

it('should enable the search button while the input is not empty', () => {

    const wrapper = shallowWithTheme(<HomepageSearch />);

    wrapper.setState({ orderSearch: '111' });

        expect(wrapper.find(SearchButton).dive().props().isDisabled).toBe(false);

      });