How to test for importing "*.css" modules in tsx for composition-api?

[senwebdev]

Example code of "Button.tsx" file. In this case, if I'd like to add new component named "Button" and to style it to improve the user interface.

---

import './Button.css';
import { createComponent } from '@vue/composition-api';

export default createComponent({
name: 'Button',
setup() {
//.....
},
template: <button></button>
});

This component renders correctly but the problem was only on testing.
When I test it with jest, I've got the following error!

"Test suite failed to run ...
Jest encountered an unexpected token.

SyntaxError: Unexpected token .

1 | import './Button.css';
2 | import ... "

I'd appreciate if you let me know what is the issue here.

---

I've added both of vue-jest, ts-jest. jest.config.js is written like here.

const { pathsToModuleNameMapper } = require('ts-jest/utils');
const { compilerOptions } = require('./tsconfig');

module.exports = {
verbose: true,

errorOnDeprecated: true,

restoreMocks: true,
resetModules: true,

timers: 'fake',

moduleFileExtensions: ['vue', 'js', 'ts', 'tsx'],
moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, {
prefix: '/',
}),
transform: {
'^.+\.(ts|tsx)?$': 'ts-jest',
'\.vue$': 'vue-jest',
},
testMatch: ['/src/**/*.(spec|test).+(ts|tsx)'],

snapshotSerializers: ['jest-serializer-vue'],

globals: {
'vue-jest': {
babelConfig: false,
},
},

setupFiles: ['/src/plugins/components.ts'],
};