在 React with Jest 中为 @material-ui withStyles 创建手动模拟

Question

I am trying to create manual mocks for the @material-ui/core/styles module, which exports the HOC called withStyles .

Using the inline mock with jest.mock works perfectly, but when I try to move this logic into sharable __mocks__ folder, it does not work anymore.

I removed from the file being tested all the unecessary code, just keeping the two lines creating the issues:

import { withStyles } from '@material-ui/core/styles';

console.log('loaded styles:', withStyles);

export default 'hello';

And the test simplified as well, just to see if the mock is working, is the following:

import test from '../test';
console.log(test);

What I have tried is to create a __mocks__ folder in the root of the project, where I have the node_modules folder.

There I created a first folder called @material-ui and inside it another folder called core . Inside this folder I have a file called styles.js with the following code:

export const withStyles = 'hello world';

So the structure looks like:

- __mocks__
  - @material-ui
    - core
      - styles.js
- node_modules

This is the code which works, with the mock defined inside the same testing file:

jest.mock('@material-ui/core/styles', () => ({
  withStyles: () => Component => props => (
    <Component
      classes=""
      {...props}
    />
  ),
}));

What is happening with the __mocks__ folder is that, if I do not call any

jest.mock('@material-ui/core/styles');

inside my test file, it uses the real withStyles , so the real module. No mock at all is being used.

If I use the:

jest.mock('@material-ui/core/styles');

It uses an automatic mock autogenerated by jest (or it looks so), skipping the one I define above.

Just a note about packages, I used CRA for bootstrapping the app and the jest version I currently have is the 20, with the react-scripts version 1.0.17

Thanks to you all for you the help!

Answer 1

Here is how you should use manual mocking in __mocks__/@material-ui/core/styles.js :

// Grab the original exports
import * as Styles from '@material-ui/core/styles';

const mockWithStyles = () => {
  console.log('withStyles being mocked'); // this shows that it works
  /**
   * Note: if you want to mock this return value to be
   * different within a test suite then use
   * the pattern defined here:
   * https://jestjs.io/docs/en/manual-mocks
   */

  return () => {}; // your mock function (adjust as needed)
  // you can also return the same implementation on certain conditions
  // return Styles.makeStyles; 
};

module.exports = { ...Styles, withStyles: mockWithStyles };

Here is how I manual mock makeStyles :

// Grab the original exports
// eslint-disable-next-line import/no-extraneous-dependencies
import * as Styles from '@material-ui/core/styles';
import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
import options from '../../../src/themes/options';

const mockMakeStyles = func => {
  /**
   * Note: if you want to mock this return value to be
   * different within a test suite then use
   * the pattern defined here:
   * https://jestjs.io/docs/en/manual-mocks
   */

  /**
   * Work around because Shallow rendering does not
   * Hook context and some other hook features.
   * `makeStyles` accept a function as argument (func)
   * and that function accept a theme as argument
   * so we can take that same function, passing it as
   * parameter to the original makeStyles and
   * binding it with our custom theme
   */
  const theme = createMuiTheme(options);
  return Styles.makeStyles(func.bind(null, theme));
};

module.exports = { ...Styles, makeStyles: mockMakeStyles };

And makeStyles result uses React.useContext , so we have to avoid mocking useContext for makeStyles . Either use mockImplementationOnce if you use React.useContext(...) first in you component, or just filter it out in your test code as:

jest.spyOn(React, 'useContext').mockImplementation(context => {
  console.log(context);
  // only stub the response if
  if (context.displayName === 'MyAppContext') {
    return {
      auth: {},
      lang: 'en',
      snackbar: () => {},
    };
  }

  const ActualReact = jest.requireActual('react');
  return ActualReact.useContext(context);
});

And on your createContext() call, probably in a store.js , add a displayName (standard), or any other custom property to Identify your context:

const store = React.createContext(initialState);
store.displayName = 'MyAppContext';

The makeStyles context displayName will appear as StylesContext and ThemeContext and their implementation will remain untouched to avoid error.

This fixed all kind of mocking problem with makeStyles . But I haven't use withStyles to know its structure deeply, but similar logic should be applicable.

Answer 2

I created the file src/__mocks__/@material-ui/core/styles.jsx in my project and inside I put:

import * as Styles from '@material-ui/core/styles';
import React from 'react';

const withStyles = () => Component => props => <Component classes={{}} {...props} />;

module.exports = { ...Styles, withStyles };