如何使用Vitest测试具有框架动作的React应用程序？

Question

配置Vite+纱+React ts+ Framer-Motion

所以，一切都很好直到我开始和Framer-Motion合作.网页很好，而且框架运动是无缝工作的，但是当我尝试使用vitest时，只是为了呈现我的App组件，它给了我一个错误：错误

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;

在我将一个简单的<motion.button>添加到App之前，它自己用来运行良好的测试。测试：

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

好了，解决了！所以我唯一需要做的就是

deps: {
  registerNodeLoader: false
}

到vite.config.ts下的test。

有关更多信息，我推荐https://vitest.dev/config/#deps