Considering updated materializecss?

[Smankusors]

Description

Hello react-materialize team,

So as you can see, the original repo in Dogfalo/materialize has not been updated since Oct 31, 2019 (ignoring the patreon updates). Because of that, we, the new materializecss team, decided to fork the repo which is available at materializecss/materialize.

We recently (well, 4 months ago) released 1.1.0-alpha that's also available on the npm registry (https://www.npmjs.com/package/@materializecss/materialize)

With that, I think you can abandon the Dogfalo/materialize, and switch to materializecss/materialize? 💭

Thanks,
Smankusors

Versions

react-materialize: 3.9.8
materialize-css: 1.1.0-alpha
react: 17.0.2

[alextrastero]

I'll take a look when possible, thanks for the heads up

[Smankusors]

Oh yeah just heads up, if you're trying to test using new materializecss 1.1.0-alpha, it's currently failing. It's because the M variable was not defined as it should be, and it has been fixed with this PR. (not released yet)

[hb0]

Did anybody get react-materialize to work with @materializecss/materialize?

I get the old error M is not defined back when I try to switch to required(@materializecss/materialize) in my jest test, like some time back.

My previous fix was:

• using import M from 'materialize-css' in the test.js
• add to index.html:

    <link rel="stylesheet" href="%PUBLIC_URL%/material-icons.css">
    <link rel="stylesheet" href="%PUBLIC_URL%/materialize_1.0.0.min.css">
    <script src="%PUBLIC_URL%/materialize_1.0.0.min.js"></script>

I've tried replacing

• materialize-css with @materializecss/materialize in my package.json (and npm i afterwards).
• replacing in my test.js files import M from 'materialize-css' with import M from '@materializecss/materialize'
• replacing in my setupTestProvider.js the M mock: global.M = require('materialize-css') with global.M = require('@materializecss/materialize')
• replacing in index.html the mentioned fix above with:

/* from `@materializecss/materialize > dist > js` */
<script src="%PUBLIC_URL%/materialize_2.0.3.min.js"></script>

[alextrastero]

As far as I know, replacing with the new package should be a simple replace, you just need to make sure that M is available in window.M.

As for tests:

Would something like this work?

// setupTests.js
global.M = jest.fn()

[hb0]

I get the error

    TypeError: Cannot read properties of undefined (reading 'init')

      281 |     const latestSegmentDeletionDate = new Date('2099-01-01T07:21:18.531500Z')
      282 |
    > 283 |     render(<Router> <Jobs
          |           ^
      284 |               selected={false}
      285 |               checkable={false}
      286 |               jobs={ [runningSegmentJob, runningSegmentHistoryJob] }

      at node_modules/react-materialize/lib/Button.js:58:32
      at invokePassiveEffectCreate (node_modules/react-dom/cjs/react-dom.development.js:23487:20)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
      at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/react-scripts/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
      at innerInvokeEventListeners (node_modules/react-scripts/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
      at invokeEventListeners (node_modules/react-scripts/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
      at HTMLUnknownElementImpl._dispatch (node_modules/react-scripts/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/react-scripts/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
      at HTMLUnknownElement.dispatchEvent (node_modules/react-scripts/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:3994:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:4056:31)
      at flushPassiveEffectsImpl (node_modules/react-dom/cjs/react-dom.development.js:23574:9)
      at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:468:12)
      at runWithPriority$1 (node_modules/react-dom/cjs/react-dom.development.js:11276:10)
      at flushPassiveEffects (node_modules/react-dom/cjs/react-dom.development.js:23447:14)
      at Object.<anonymous>.flushWork (node_modules/react-dom/cjs/react-dom-test-utils.development.js:992:10)
      at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1107:9)
      at render (node_modules/@testing-library/react/dist/pure.js:97:26)
      at Object.<anonymous> (src/components/sidebar/datasets/Jobs.test.js:283:11)

When I only change in my code:

• package.json: replace materialize-css:^1.0.0 with @materializecss/materialize:^2.0.3 and npm i afterwards
• public/index.html: uncomment -> <!--link rel="stylesheet" href="%PUBLIC_URL%/materialize_1.0.0.min.css"-->
• public/index.html: set -> <script src="%PUBLIC_URL%/materialize_2.0.3.min.js"></script> and add new js file to public
• my.test.js: replace import M from 'materialize-css' with global.M = jest.fn()
• setupTestProvider.js: replace global.M = require('materialize-css') with global.M = jest.fn(). This file mocks the redux store and dispatcher

[alextrastero]

Check out how we mock materialize in our tests https://github.com/react-materialize/react-materialize/blob/d36a4ddad2781e1eb206007c5b615033c5c1c5d5/test/Button.spec.js it might help

[hb0]

Have you tried your approach with global.M = require('@materializecss/materialize') in setup.js ?

I get Cannot read properties of undefined (reading 'init') again with

global.M = require('@materializecss/materialize')
import mocker from '../../../new-mocker'

describe('Check', () => {
  const initMock = jest.fn()
  const restore = mocker('init', initMock)
  beforeEach(() => {
    initMock.mockClear();
  });
  afterAll(() => {
    restore()
  });
  test('renders component', () => {...
     render(<Router> <Jobs ...

When I try to use global.M = require('@materializecss/materialize') in react-materialize after adding the dependency and npm i --force && npm run test afterwards, I also get lots of failed test like M.someFunction not found.

I guess the switch to @materializecss is not that trivial, I'm afraid.

Thanks for the replies anyways!

[alextrastero]

Were your tests passing with materializecss as opposed to @materializecss/materialize?

[hb0]

Yes, my own tests pass with "materialize-css": "^1.0.0".
Also, almost all react-materialize tests passed with "materialize-css": "^1.0.0".