疯狂的欧美乱大交,东北少妇不带套对白

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

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

P粉946437474 2024-01-16 13:49:47

694

Kerana lebih daripada 1750 ujian telah ditulis semula dalam enzyme沒有維護(hù)并且不支持react 18+，所以我正在嘗試將1750多個現(xiàn)有的單元測試遷移到react-testing-library + global-jsdom來運(yùn)行，這樣我們的應(yīng)用程序就可以繼續(xù)運(yùn)行最新版本的react。我們所有的測試都是使用mocha、chai、enzyme編寫的，我希望盡可能簡單地遷移。換句話說，我絕不會在一個全新的框架如jest.

Saya cuba menggunakannya mengikut react-testing-library來對react組件進(jìn)行單元測試的示例。如果我在使用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?

P粉946437474

membalas semua(1)

P粉7454121162024-01-17 00:03:09 Tingkat 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.