Test fails when the component contains Materialize-CSS element (JEST)

Question

I'm trying to start a test for react app, which uses elements from materialize-css library.

My test looks as simple as this:

it('renders scrollspy without crashing', () => {
  ReactDOM.render(<AppScrollspy />, div);
});

I've set this 'env-test' config file up:

// load jquery dependency
import $ from 'jquery';
global.$ = global.jQuery = $;

// load materialize-css
import 'materialize-css/dist/js/materialize';

in order to load jQuery and materialize prior to the test.

Now I get the following error:

● Test suite failed to run
    ReferenceError: Hammer is not defined

    at node_modules/materialize-css/dist/js/materialize.js:1224:21
    at Object. (node_modules/materialize-css/dist/js/materialize.js:1226:3)
    at Object. (test-env.js:3:1)
    at process._tickCallback(internal/process/next_tick.js:103:7)

as far as I can tell- 'Hammer' is an internal function in Materialize, so- is it a bug in the Materialize library or should I change something in my config file?

Answer 1

I had the same issue. To fix that:

$.prototype.collapsible = jest.fn();