Ralat ujian Mocha dilemparkan apabila memaparkan komponen MUI dalam jsdom menggunakan Pustaka Pengujian React

Question

Kerana lebih daripada 1750 ujian telah ditulis semula dalam enzyme没有维护并且不支持react 18+，所以我正在尝试将1750多个现有的单元测试迁移到react-testing-library + global-jsdom来运行，这样我们的应用程序就可以继续运行最新版本的react。我们所有的测试都是使用mocha、chai、enzyme编写的，我希望尽可能简单地迁移。换句话说，我绝不会在一个全新的框架如jest.

Saya cuba menggunakannya mengikut react-testing-library来对react组件进行单元测试的示例。如果我在使用React.createElement时使用简单的元素，比如'div'或'input' dan ia berfungsi dengan baik, tetapi apabila saya menggunakan komponen UI bahan, saya mendapat ralat:

TypeError: Tidak boleh membaca sifat null (baca "berdaftar") Dalam C:UsersuserDocumentsprojectnode_modules@emotionstyledbasedistemotion-styled-base.cjs.dev.js:143:53

Ralat di atas berlaku dalam komponen <Styled(div)>

at C:\Users\user\Documents\project\node_modules\@emotion\react\dist\emotion-element-b63ca7c6.cjs.dev.js:43:23
at Box (C:\Users\user\Documents\project\node_modules\@mui\system\createBox.js:29:41)
at DummyComponent (C:\Users\user\Documents\project\act-app\src\component\page\dummyComponent.js:2:346)

Pertimbangkan untuk menambah sempadan ralat pada pokok anda untuk menyesuaikan tingkah laku pengendalian ralat. Lawati https://reactjs.org/link/error-boundaries untuk mengetahui lebih lanjut tentang sempadan ralat. Jejak tindanan tidak tepat, tetapi ia gagal apabila saya cuba melakukan

(cipta elemen mui). h(Box, {},...)

Ini yang saya cuba sampaikan

: dummyComponent.js

const { Box } = require('@mui/material');
const React = require('react');
const h = React.createElement;

const DummyComponent = (props) => {
  const { children } = props;
  const [showChild, setShowChild] = React.useState(false);
  return (
    h(Box, {},
      h('label', { htmlFor: 'toggle' }, 'Show/Hide'),
      h('input', { id: 'toggle', type: 'checkbox', onChange: (e) => setShowChild(e.target.checked), checked: showChild }),
      showChild && children)
  );
};

module.exports = DummyComponent;

Ini adalah ujian unit mocha:

const React = require('react');
const { render, fireEvent } = require('@testing-library/react');
const h = React.createElement;

const DummyComponent = require('./dummyComponent');

describe('pageCenter', function () {
  before(function () {
    this.jsdom = require('global-jsdom')();
  });

  after(function () {
    this.jsdom();
  });

  it('should render', function () {
    const w = render(h(DummyComponent, {}, 'Hi!'));
    w.queryAllByText('Hi!').should.have.length(0);
    fireEvent.click(w.getByLabelText('Show/Hide'));
    w.queryAllByText('Hi!').should.have.length(1);
  });
});

Rasanya seperti saya kehilangan beberapa konteks untuk membenarkan komponen MUI dipaparkan, tetapi saya tidak dapat memahami apa, atau jika ini sebenarnya isunya. Tidak banyak hasil Google untuk ralat khusus ini. Ada idea?

Answer 1

Menurut kebergantungan perpustakaan MUI, saya mendapati bahawa mereka menggunakan @emotion/react dan @emosi/styled dalam beberapa proses rendering, ini nampaknya menjadi isu dengan MUI v5, mereka menukar objek cache dan memadamnya tanpa diduga Objek cache yang disediakan oleh @emotion/react menghasilkan TypeError: Cannot read property 'registered' of undefined的错误，因为他们没有在新的缓存中添加cache.registered.

Penyelesaian: Saya menyelesaikan masalah ini dengan membungkus penyedia @emotion/react ({komponen saya}) dalam komponen saya. Anda boleh cuba mengikuti contoh yang disediakan oleh @emotion.react: https://emotion.sh/docs/cache-provider

Juga pastikan kebergantungan daripada @emotion/react dipasang dengan betul dengan menjalankan arahan berikut: npm install --save @emotion/react或yarn add @emotion/react

Kod sepatutnya kelihatan seperti ini:

Ini dummyComponent.js menggunakan sintaks JSX yang lebih biasa:

const React = require('react');
const { Box } = require('@mui/material');

const DummyComponent = (props) => {
  const { children } = props;
  const [showChild, setShowChild] = React.useState(false);

  return (
    <Box>
      <label htmlFor="toggle">Show/Hide</label>
      <input
        id="toggle"
        type="checkbox"
        onChange={(e) => setShowChild(e.target.checked)}
        checked={showChild}
      />
      {showChild && children}
    </Box>
  );
};

export default DummyComponent;

Ini adalah ujian unit mocha:

const React = require('react');
const { expect } = require('chai');
const { render, fireEvent } = require('@testing-library/react');
const createCache = require("@emotion/cache");

const DummyComponent = require('./dummyComponent');

describe('pageCenter', function () {
  before(function () {
    this.jsdom = require('global-jsdom')();
  });

  after(function () {
    this.jsdom();
  });
  
  const myCache = createCache({
   key: 'my-prefix-key'
  });

  it('should render', function () {
    const { queryAllByText, getByLabelText } = render(
      <CacheProvider value={myCache}>          
        <DummyComponent>Hi!</DummyComponent>
      </CacheProvider>
    );

    expect(queryAllByText('Hi!')).should.have.length(0);
    fireEvent.click(getByLabelText('Show/Hide'));
    expect(queryAllByText('Hi!')).should.have.length(1);
  });
});

Sila ambil perhatian bahawa saya juga menggunakan beberapa sintaks JSX dalam kes ujian const { expect } = require('chai');，这使我可以使用should dan memanggil fungsi lain daripada chai.