Not working with typescript and jsx

[bschlenk]

First off, I'm glad work is being done in this space! Being able to use jest with vite will really solidify it as the next big framework in my mind.

This doesn't seem to be working with TypeScript and jsx, but only if the jsx is within the test file. jsx in the files being imported seems to be working fine. I'm migrating a create-react-app project over and I have the boilerplate test still, looking like this:

// App.test.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from '../App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});

which fails with:

Click to expand

``` > vite-jest (node:73359) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time (Use `node --trace-warnings ...` to show where the warning was created) PASS src/utils/__tests__/isSet.test.ts FAIL src/__tests__/App.test.tsx ● Test suite failed to run SyntaxError: Unexpected token '<' at Runtime.loadEsmModule (node_modules/jest-runtime/build/index.js:577:24) at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13) at runJest (node_modules/@jest/core/build/runJest.js:387:19) at _run10000 (node_modules/@jest/core/build/cli/index.js:408:7) at runCLI (node_modules/@jest/core/build/cli/index.js:261:3) Test Suites: 1 failed, 1 passed, 2 total Tests: 3 passed, 3 total Snapshots: 0 total Time: 1.76 s Ran all test suites. /Volumes/Media/bschlenk/Workspace/set/node_modules/execa/lib/error.js:60 error = new Error(message); ^ Error: Command failed with exit code 1: node --experimental-vm-modules /Volumes/Media/bschlenk/Workspace/set/node_modules/jest/bin/jest.js at makeError (/Volumes/Media/bschlenk/Workspace/set/node_modules/execa/lib/error.js:60:11) at Function.module.exports.sync (/Volumes/Media/bschlenk/Workspace/set/node_modules/execa/index.js:194:17) at file:///Volumes/Media/bschlenk/Workspace/set/node_modules/vite-jest/bin/vite-jest.js:14:7 at ModuleJob.run (internal/modules/esm/module_job.js:169:25) at async Loader.import (internal/modules/esm/loader.js:177:24) at async Object.loadESM (internal/process/esm_loader.js:68:5) { shortMessage: 'Command failed with exit code 1: node --experimental-vm-modules /Volumes/Media/bschlenk/Workspace/set/node_modules/jest/bin/jest.js ', command: 'node --experimental-vm-modules /Volumes/Media/bschlenk/Workspace/set/node_modules/jest/bin/jest.js ', escapedCommand: 'node --experimental-vm-modules "/Volumes/Media/bschlenk/Workspace/set/node_modules/jest/bin/jest.js" ', exitCode: 1, signal: undefined, signalDescription: undefined, stdout: undefined, stderr: undefined, failed: true, timedOut: false, isCanceled: false, killed: false } ```

But if I change the test to

// App.test.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from '../App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(React.createElement(App), div); // <-- replaced jsx with React.createElement
  ReactDOM.unmountComponentAtNode(div);
});

then it passes.

[bschlenk]

I had this in my jest.config.js file:

export default {
  preset: 'vite-jest',
  moduleNameMapper: {
    '\\.scss$': '<rootDir>/__mocks__/stub.ts',
    '\\.svg$': '<rootDir>/__mocks__/svgr-mock.ts',
  },  
};

I removed the '\\.scss$': '<rootDir>/__mocks__/stub.ts', line, and everything seems to be working! I have no idea why having that line in there would break things.

[bschlenk]

I can actually leave that in (I see this preset does stub scss out by by default, but for experimentation purposes) but I have to change the regex to .+\\.scss$. I guess I need to dive into how jest uses these regex... I thought it did a simple regex.test(filename) but that doesn't seem to be the case.