optimistic-gold•2mo ago

@refinedev/mui always throws an error during tests

When I'm writing tests with vitest and react testing library, as soon as I wrap a component with the refine provider it starts throwing this error. Does anyone know how to fix this?

Error: Directory import '/home/dev/software/services/marketplace/node_modules/.pnpm/@refinedev+mui@5.15.1_@emotion+react@11.11.4_@emotion+styled@11.11.5_@mui+lab@5.0.0-alpha.170_ap3fpruar6oljtcbusiih2zudm/node_modules/@mui/material/Box' is not supported resolving ES modules imported from /home/dev/software/services/marketplace/node_modules/.pnpm/@refinedev+mui@5.15.1_@emotion+react@11.11.4_@emotion+styled@11.11.5_@mui+lab@5.0.0-alpha.170_ap3fpruar6oljtcbusiih2zudm/node_modules/@refinedev/mui/dist/index.mjs
Did you mean to import "@mui/material/node/Box/index.js"?
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Serialized Error: { code: 'ERR_UNSUPPORTED_DIR_IMPORT', url: 'file:///home/dev/software/services/marketplace/node_modules/.pnpm/@refinedev+mui@5.15.1_@emotion+react@11.11.4_@emotion+styled@11.11.5_@mui+lab@5.0.0-alpha.170_ap3fpruar6oljtcbusiih2zudm/node_modules/@mui/material/Box' }

Error: Directory import '/home/dev/software/services/marketplace/node_modules/.pnpm/@refinedev+mui@5.15.1_@emotion+react@11.11.4_@emotion+styled@11.11.5_@mui+lab@5.0.0-alpha.170_ap3fpruar6oljtcbusiih2zudm/node_modules/@mui/material/Box' is not supported resolving ES modules imported from /home/dev/software/services/marketplace/node_modules/.pnpm/@refinedev+mui@5.15.1_@emotion+react@11.11.4_@emotion+styled@11.11.5_@mui+lab@5.0.0-alpha.170_ap3fpruar6oljtcbusiih2zudm/node_modules/@refinedev/mui/dist/index.mjs
Did you mean to import "@mui/material/node/Box/index.js"?
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Serialized Error: { code: 'ERR_UNSUPPORTED_DIR_IMPORT', url: 'file:///home/dev/software/services/marketplace/node_modules/.pnpm/@refinedev+mui@5.15.1_@emotion+react@11.11.4_@emotion+styled@11.11.5_@mui+lab@5.0.0-alpha.170_ap3fpruar6oljtcbusiih2zudm/node_modules/@mui/material/Box' }

I opened an issue because there doesn't seem to be any docs or examples on how to write tests https://github.com/refinedev/refine/issues/6020.

GitHub

Issues · refinedev/refine

A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. - Issues · refinedev/refine

11 Replies

kapa.ai•2mo ago

Hi @boris. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like you're encountering issues when writing tests with @refinedev/mui and wrapping components with the refine provider. Based on the knowledge sources, there are a few potential issues and solutions that might help you resolve this problem. Common Issues and Solutions 1. Missing or Incorrect Data Provider Configuration: If you encounter errors related to the data provider, ensure that you have correctly configured the data provider. For example, you might see an error like:

   There is no "default" data provider. Please pass dataProviderName.

   There is no "default" data provider. Please pass dataProviderName.

This can be resolved by ensuring that all required methods are added to the data provider. 2. Testing Setup: When testing components that use refine hooks, you need to properly set up the test environment. Instead of just wrapping the component with QueryClientProvider, you should prepare a test wrapper with the <Refine /> component. Here are some examples from the refine codebase that might help you set up your tests correctly: - @pankod/refine-antd's test setup (https://github.com/refinedev/refine/blob/next/packages/antd/test/index.tsx#L28) - @pankod/refine-mantine's test setup (https://github.com/refinedev/refine/blob/next/packages/mantine/test/index.tsx) - ErrorComponent's test example (https://github.com/refinedev/refine/blob/next/packages/antd/src/components/pages/error/index.spec.tsx#L21-L27) - Edit component's test example (https://github.com/refinedev/refine/blob/next/packages/antd/src/components/crud/edit/index.spec.tsx#L10-L55) - useTable hook test example (https://github.com/refinedev/refine/blob/next/packages/antd/src/hooks/table/useTable/useTable.spec.ts#L27-L29) 3. Handling Specific Errors: If you encounter specific errors like TypeError: Cannot redefine property: __esModule, it might be related to the way refine re-exports certain modules. A suggested fix for this issue is to modify the code where the error occurs:

   Object.keys(reactQuery).forEach(function (k) {
   -  if (k !== 'default') Object.defineProperty(exports, k, {
   +  if (k !== 'default' && k !== '__esModule') Object.defineProperty(exports, k, {
       enumerable: true,
       get: function () {
         return reactQuery[k];
       }
     });
   });

   Object.keys(reactQuery).forEach(function (k) {
   -  if (k !== 'default') Object.defineProperty(exports, k, {
   +  if (k !== 'default' && k !== '__esModule') Object.defineProperty(exports, k, {
       enumerable: true,
       get: function () {
         return reactQuery[k];
       }
     });
   });

Example Test Setup Here is an example of how you might set up your test environment using the <Refine /> component:

import { render } from '@testing-library/react';
import { Refine } from '@refinedev/core';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { BrowserRouter } from 'react-router-dom';
import { dataProvider } from 'path-to-your-data-provider';
import YourComponent from 'path-to-your-component';

const queryClient = new QueryClient();

const TestWrapper = ({ children }) => (
  <QueryClientProvider client={queryClient}>
    <BrowserRouter>
      <Refine dataProvider={dataProvider}>
        {children}
      </Refine>
    </BrowserRouter>
  </QueryClientProvider>
);

test('renders YourComponent', () => {
  const { getByText } = render(
    <TestWrapper>
      <YourComponent />
    </TestWrapper>
  );
  expect(getByText('Your Component Text')).toBeInTheDocument();
});

import { render } from '@testing-library/react';
import { Refine } from '@refinedev/core';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { BrowserRouter } from 'react-router-dom';
import { dataProvider } from 'path-to-your-data-provider';
import YourComponent from 'path-to-your-component';

const queryClient = new QueryClient();

const TestWrapper = ({ children }) => (
  <QueryClientProvider client={queryClient}>
    <BrowserRouter>
      <Refine dataProvider={dataProvider}>
        {children}
      </Refine>
    </BrowserRouter>
  </QueryClientProvider>
);

test('renders YourComponent', () => {
  const { getByText } = render(
    <TestWrapper>
      <YourComponent />
    </TestWrapper>
  );
  expect(getByText('Your Component Text')).toBeInTheDocument();
});

By ensuring that your test environment is ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@499582506736287744> kapa.ai is still learning and improving, please let us know how it did by reacting below

optimistic-gold•2mo ago

Why is it not supporting resolving ES modules? The file it's importing exists in the right place

compatible-crimson•2mo ago

Hey @boris, do you have the same issue if you import a mui component in your code like the screenshot above? (import Box from "@mui/material/Box"? Looks like an issue with the module resolver of jest. I think this can be resolved by working on moduleNameMapper from jest.config.js 🤔

optimistic-gold•2mo ago

I don't have this issue when I import Box from "@mui/material/Box" @aliemir are you suggesting that I configure vite to transform import Box from '@mui/material/Box'; to import { Box } from '@mui/material;? i'm using vitest btw

compatible-crimson•2mo ago

Guessing that you’re using type=module environment, this might be happening due to directory imports not being properly resolved in esm 🤔 I will investigate the issue and try to prepare a solution. Can you add some info about your project setup in the issue?

optimistic-gold•2mo ago

i'm not using type=module (adding it makes not difference to the error), the imports aren't being resolved, but idk why i'll add more info asap

optimistic-gold•2mo ago

some configs i'm using

tsconfig.spec.json

vite.config.ts

compatible-crimson•2mo ago

Btw, can you also add your node version to the issue? 🙏

optimistic-gold•2mo ago

the Github issue or this post?

compatible-crimson•2mo ago

Github will be better but both are ok😅