Jss: Testing React components with Jest

[ar7casper]

Hi,

I'm having a really annoying problem while trying to test components that were wrapped with injectSheet.

Let's say I've got a component - Foo.
I'm exporting it like so - export default injectSheet(styles)(Foo).

Now, on the testing side, when doing shallow render using enzyme, I get the component as <Jss(Foo) /> which is ok.

The problem starts when I want to dive into the component itself using enzyme's .dive() method.

What I get is the following error -
[undefined] Please use ThemeProvider to be able to use WithTheme

Here's a good place to state that in my tests, I'm wrapping every component with withTheme HOC that passes the theme.

Would love to get your help, thanks.

[email protected]
[email protected]
[email protected]

[kof]

You can access wrapped component Wrapped.InnerComponent http://cssinjs.org/react-jss?v=v8.3.3#the-inner-component

[ar7casper]

@kof First of all, thanks.

Do you know of a repo that uses Jest, enzyme & React-JSS?
I'm still having issues, can't make it work as you suggest.

[kof]

I am not aware of it, I heard someone wanted to create a library for snapshot testing of react-jss styles with jest, but I haven't seen anything ready.

[ar7casper]

@kof
Made it work.
Thank you very much.
Awesome lib, I love it. Best CSS experience I ever had.

[lttb]

@ar7casper just in case, I'm using jest to test styled-jss with snapshot testing too, so there are some examples: tests, snapshots, a helper for styles snapshot testing and usage

[ar7casper]

@lttb Thank you very much for those.

[kof]

@lttb https://github.com/cssinjs/react-jss/issues/93 we should be able to test components together with styles at some point

[ar7casper]

@kof @lttb
I'm 100% certain I'm missing something really stupid, would love your help.
I'm getting back to my original problem -

The component -

export injectSheet(styles)(Foo);

In the test file -

const foo = shallow(<Foo.InnerComponent {...props} />);

describe('Button selection', () => {
  const btns = foo.find('Jss(Foo)');
  const firstBtn = btns.first();

  test('first button is selected', () => { 
    expect(firstBtn.props().className).toEqual(expect.stringContaining('selected'));
  })
})

That way, everything works, except for the test itself, for obvious reasons, the className is undefined.

When changing the internals of the shallow declaration, to -
const foo = shallow(<Foo {...props} />);

I get -
[undefined] Please use ThemeProvider to be able to use WithTheme

Which kinda makes sense.
So, I wrap it -
const foo = shallow( <ThemeProvider theme={theme}> <Foo {...props} /> </ThemeProvider> )

and now, this test fails -
test('to have selectedInd state', () => { expect(presets.state()).toHaveProperty('selectedInd'); });
The state object is empty {}. (This test, before wrapping, passed).

When I do foo.dive(), I get the same
[undefined] Please use ThemeProvider to be able to use WithTheme

And so it goes, chaising my own tail for so long, tried many different stuff.
But keep getting back to the same result.

[saurabhnemade]

I am also facing the same.