Testing Components that use withStyles

[valecarlos]

What would be the way to go about testing components that use withIsomorphicStyles?

I am using jest + enzyme for unit testing but even though I wrap MyComponent with the StyleContext.Provider it won't work for testing, I get TypeError: Cannot read property 'apply' of undefined, although this works when actually running the app.

// MyComponent.test.js
import React from "react";
import { mount } from "enzyme";
import MyComponent from "./components/MyComponent";
import StyleContext from 'isomorphic-style-loader/StyleContext'

describe("MyComponent component", () => {
  test("Renders the MyComponent", () => {
    const stylesMock = jest.fn()
    const component = mount(
      <StyleContext.Provider value={{ stylesMock }}>
        <MyComponent />
      </StyleContext.Provider>
    );
    expect(component);
  });
});

MyComponent is nothing fancy, just:

import React from 'react';
import withIsomorphicStyles from 'isomorphic-style-loader/withStyles'
import myComponentStyles from '../../../../node_modules/video.js/dist/video-js.css'

class MyComponent extends React.Component<Props> {
  
  render (){
    return (
      <div>
        test
      </div>
    )
  }
}

export default withIsomorphicStyles(myComponentStyles)(MyComponent)

The error I am getting is:

TypeError: Cannot read property 'apply' of undefined

       9 |   test("Renders the navigationLinks comoponent", () => {
      10 |     const stylesMock = jest.fn()
    > 11 |     const component = mount(
         |                       ^

[maksimgm]

@valecarlos, I was able to resolve this. Here are the steps to fix this:

Follow the steps described in this article: https://medium.com/@m.izadmehr/react-starter-kit-testing-isomorphic-style-loader-with-jest-and-enzyme-fd361b0591f0

Basiclly, you'll need to create a mock folder inside of your tools directory, which will contain a withStyles.js . Next in your jest.config.js change your moduleNameMapper to:

  moduleNameMapper: {
    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
    'isomorphic-style-loader/lib/withStyles':
      '<rootDir>/tools/mocks/withStyles.js',
  },

Hope this helps :)

[Monfernape]

@maksimgm solution works great but I think we've a typo here. Instead of isomorphic-style-loader/lib/withStyles, we need isomorphic-style-loader/withStyles (without lib)