How to test a React app with framer motion using Vitest?

Question

Config → Vite+ Yarn + React-ts + Framer-Motion

So, everything was fine untill i started working with Framer-Motion... The webpage is fine, and frame-motion works seamlessly, but when i try to use vitest, just to render my App component it gives me an error: Error

FAIL  tests/unit/components.spec.tsx [ tests/unit/components.spec.tsx ]
SyntaxError: Named export '__assign' not found. The requested module 'tslib' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'tslib';``
const { __assign } = pkg;

The test it self used to run fine before i added a simple <motion.button> to the App component. The test:

import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import App from '../../src/App';

describe('App.vue', () => {
  it('should render the main input', () => {
    render(<App />);
    expect(screen.getByTestId('mainInput')).toBeDefined();
  });
});

Answer 1

Ok, it is solved ! So the only thing that i needed to do was to add

deps: {
  registerNodeLoader: false
}

to the vite.config.ts under test.

For more info i recommend https://vitest.dev/config/#deps