score:0
it looks like you've not used the correct file extension here. was your test named doctor.test.ts
instead of doctor.test.tsx
?
when testing react components you need to ensure you use (j|t)sx
extension.
score:1
the error means that jsx syntax isn't recognized by typescript compiler and is parsed as a generic.
since tsconfig.json has "jsx": "react"
, this means that it wasn't picked up by ts-jest for some reason. the reason is that it was overridden by tsconfig
option. a common way to provide a config for tests is to extend another config
tsconfig.test.json
{
"extends": "./tsconfig",
"compileroptions": {
"allowjs": true
}
}
and specify it for ts-jest:
"tsconfig": "tsconfig.test.json"
also, ts-jest doesn't have extends
option, and even if it had, it wouldn't accept babel config. there is babelconfig
option for that. since ts-jest transforms typescript and jsx, @babel/preset-react
and @babel/preset-typescript
may be unneeded in babel config.
Source: stackoverflow.com
Related Query
- jest issue with typescript react components
- Typescript issue with dynamic keys in object referencing react components
- Use CSS Modules in React components with Typescript built by webpack
- React and typescript with webpack typing issue
- Jest with React Native getting issue
- Testing Webpack built React components with Jest
- Mock forwardRef components jest mockImplementation with typescript
- Jest encountered an unexpected token when working with React TypeScript
- Unit testing ES7 React components with Jest
- Typescript test with Jest with Enzyme does not recognise components
- Jest test for a copy to clipboard method using react with typescript
- How to test with jest and typescript with types a basic react function component
- Getting started testing React components with Enzyme and Jest
- Spreading Props TypeScript with React and Styled Components
- Mapping data object with a type field to specific React Components with TypeScript
- Test suits failed with "SyntaxError: Unexpected token 'export" ' react typescript using jest
- Error when testing react components with jest and css-modules
- router props and custom props with typescript react router dom for functional components
- Dynamically access object with react components in typescript by key
- React Component State issue with duplicate components
- render dynamically react components with typescript
- React Typescript facing issue with enzyme
- Access components props which is returned from HOC - Jest with React
- Test react components with jest and enzyme and css modules
- React children[] issue with TypeScript
- Issue laying out components with React and Flexbox
- Using Typescript generics for React Functional Components with eslint props validation
- React + Typescript styled components themeProvider props typing issue
- Issue with setup and run Electron + React + Typescript + Webpack application
- React Typescript Context - issue with mapping object
More Query from same tag
- How to show dropdown in react js?
- How can I provide variables.scss to each .scss file when bundling with webpack?
- Passing event object along with param in mapDispatchToProps
- Search component showing last result when input field is cleared using backspace
- Showing an array in React-Admin
- React component missing elements of props
- react google maps node module map style loads empty object, not json
- Passing values to a nested component in Storybook
- Making scrollable div in CSS
- Instance of reactJs component to render a component
- How to handle repeated similar types in TypeScript
- Typescript: Pattern for building an object one property at a time
- How to bypass React's error handling of colors
- Reuse component loaded from a Route
- How to change values in config file dynamically in react?
- Find specific children components regardless of depth in React
- Unexpected token, expected ";" in reactjs
- How to deploy a demo app for a ReactJS component library on netlify?
- Create html structure which will allow only 3 div elements in each li. In React + underscore.js
- Add a tooltip to MUI Badge content?
- React: setTimeout not clearing within useEffect hook
- How read csv file only specific columns using javascript
- Add css styling (or class) to every element of react array of objects in a Component
- Error: Invalid hook call - when calling a Modal component
- maxDate in Material UI MobileDatePicker doesn't work
- When using .map and input tag inside the index is always 0
- Keyboard dismisses while typing TextInput in nested functional component React Native
- How to fix "Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0" ERROR
- How can I grab this id in React?
- dispatch action triggering, but redux store not updating