React 테스트 라이브러리를 사용하여 jsdom에서 MUI 구성 요소를 렌더링할 때 Mocha 테스트 오류가 발생합니다.

Question

1750개 이상의 테스트가 enzyme没有维护并且不支持react 18+，所以我正在尝试将1750多个现有的单元测试迁移到react-testing-library + global-jsdom来运行，这样我们的应用程序就可以继续运行最新版本的react。我们所有的测试都是使用mocha、chai、enzyme编写的，我希望尽可能简单地迁移。换句话说，我绝不会在一个全新的框架如jest로 다시 작성되었기 때문입니다.

이를 react-testing-library来对react组件进行单元测试的示例。如果我在使用React.createElement时使用简单的元素，比如'div'或'input'에 따라 사용하려고 하는데 잘 작동하지만 머티리얼 UI 구성 요소를 사용할 때 다음 오류가 발생합니다.

TypeError: null 속성을 읽을 수 없습니다("등록됨" 읽기). C:UsersuserDocumentsprojectnode_modules@emotionstyledbasedistemotion-styled-base.cjs.dev.js:143:53

위 오류는 <Styled(div)> 구성요소에서 발생합니다.

으아악

오류 처리 동작을 사용자 정의하려면 트리에 오류 경계를 추가하는 것이 좋습니다. 오류 경계에 대해 자세히 알아보려면 https://reactjs.org/link/error-boundaries를 방문하세요. 스택 추적은 정확하지 않지만 h(Box, {},...)(mui 요소 생성)을 수행하려고 하면 실패합니다.

이것이 제가 렌더링하려는 것입니다 dummyComponent.js:

으아악

모카 단위 테스트입니다:

으아악

MUI 구성 요소를 렌더링할 수 있는 일부 컨텍스트가 누락된 것 같지만 무엇이 문제인지, 이것이 실제로 문제인지 알 수 없는 것 같습니다. 이 특정 오류에 대한 Google 검색결과가 많지 않습니다. 어떤 아이디어가 있나요?

Answer 1

MUI 라이브러리 종속성에 따르면 일부 렌더링 프로세스에서 @emotion/react 및 @emotion/styled를 사용하는 것으로 나타났습니다. 이는 MUI v5의 문제인 것 같습니다. 캐시 개체를 변경하고 예기치 않게 삭제합니다. @emotion/react에서 제공한 캐시 개체의 결과는 TypeError: Cannot read property 'registered' of undefined的错误，因为他们没有在新的缓存中添加cache.registered입니다.

해결책: 내 구성 요소에 @emotion/react 공급자({내 구성 요소})를 래핑하여 이 문제를 해결했습니다. @emotion.react에서 제공하는 예시를 따라해 보세요: https://emotion.sh/docs/cache-provider

또한 다음 명령을 실행하여 @emotion/react의 종속성이 올바르게 설치되었는지 확인하세요. npm install --save @emotion/react或yarn add @emotion/react

코드는 다음과 같아야 합니다:

더 친숙한 JSX 구문을 사용하는 dummyComponent.js는 다음과 같습니다.

으아악

모카 단위 테스트입니다:

으아악

또한 테스트 사례에서 일부 JSX 구문을 사용하고const { expect } = require('chai');，这使我可以使用should chai의 다른 기능을 연결하고 있다는 점에 유의하세요.