I am using vitest to run my ReactComponent tests.
import { render, screen } from '@testing-library/react';
import { Calc } from '../features/explore/Calc';
describe('calc tests', () => {
it('should render calculator screen', () => {
const { getByTestId } = render(<Calc />);
expect(getByTestId('calc-title').textContent).toBe('Calculator');
});
});
This is the vite.config.ts
import * as path from 'node:path';
import { defineConfig } from 'vitest/config';
import tsconfigPaths from 'vite-tsconfig-paths';
export default defineConfig({
plugins: [tsconfigPaths()],
test: {
globals: true,
environment: 'jsdom',
setupFiles: [
require.resolve('dotenv-mono/load'),
path.resolve(__dirname, '__tests__/setupTests.ts'),
],
include: ['**/*.test.{ts,tsx}'],},
});
How to resolve this issue ?
it gives error as :
FAIL tests/ExplorePage.test.tsx [ tests/ExplorePage.test.tsx ]
app:test:unit: SyntaxError: Named export ‘ScrollView’ not found. The requested module ‘react-native’ 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 ‘react-native’;
const { ScrollView: ScrollViewNative } = pkg;
I am not using ScrollView in my component directly.