Testing: TypeError: Cannot read property 'apply' of undefined at StyledComponent.componentWillMount

After setting up tests with Jest and getting through the auto-mocking issues described in #264, I’m getting:

TypeError: Cannot read property 'apply' of undefined at StyledComponent.componentWillMount (decorators/withStyles.js:19:50)

The specific line in the withStyles decorator causing the error is:

this.removeCss = this.context.insertCss.apply(undefined, styles);

insertCss is undefined. How can the context be passed into the decorator for testing?

<bountysource-plugin>

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource. </bountysource-plugin>

[timhuff]

I resolved this in the following way: I modified package.json in accordance with the jest docs by adding this:

  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "identity-obj-proxy",
      "isomorphic-style-loader/lib/withStyles": "<rootDir>/tools/mocks/withStyles.js"
    }
  }

Notice that I’ve appended a moduleNameMapper for isomorphic-style-loader/lib/withStyles. I then created the specified file: I created a mocks folder in the same folder as the webpack config (tools). I created a file in that folder called withStyles.js. It has the following content:

module.exports = () => component => component

[bhargavigundaa]

Beside exporting the component with withStyles decorator, we need to export it as a stand alone.This will solve the issue

export class GridView extends Component { ... }

export default withStyles(s)(GridView);

And in test component use standalone one

import GridView from './GridView';

and in other cases use default one

import { GridView } from './GridView';