score:1
update: while this was accepted, the much better answer was provided by @alphamz below (.tsx vs .ts). that said i would still suggest create-react-app or create-next-app (much better in 2021) for react newbies who want to get up and running quickly, then you're starting with good time-tested settings.
original answer:
for someone new to react
and jest
like yourself, i would strongly suggest starting with create-react-app
with the typescript
extension
https://facebook.github.io/create-react-app/docs/adding-typescript
this gives a good baseline for ts usage with jest support (has pretty strong app defaults as well)
yarn create react-app my-app --typescript
from there, use react-testing-library
here:
https://testing-library.com/docs/react-testing-library/intro
and you can write tests like this
import { render } from 'react-testing-library';
test('init gametotaler', () => {
const myname: string = 'foo';
const { getbytext } = render(
<app name={foo} />
);
expect(getbytext(`hello, ${foo}`)).tobetruthy();
});
@testing-library (that react-testing-library is part of) is extremely well written and supported by kent c. dodds, who is a remarkably strong author of react articles and on testing in general.
he has recently written why shallow rendering (which is what is done in enzyme) can be an anti-pattern (at least for him) - https://kentcdodds.com/blog/why-i-never-use-shallow-rendering
note that create-react-app
does hide things inside its generated framework, but is well supported.
one strong plus - if you want to completely pull out of create-react-app once it's generated your codebase, you can run react-scripts eject
and then you can see the secret sauce while still having a fully buildable codebase.
hope this helps - good luck!
score:0
reactjs.org recommends react testing library.
if you want to use it with jest and also need to test typescript code, then you might have a look at crisp-react sample project. it has a react client and the tests can be found here.
score:7
i know it's a old question, but i bumped into the same problem and it has a simple solution: your file name must have the .tsx extension for using jsx tag.
Source: stackoverflow.com
Related Query
- How to test with jest and typescript with types a basic react function component
- How to test a React component that has Router, Redux and two HOCs... with Jest and Enzyme?
- How to check the value of a nested React component in a unit test with Enzyme and Jest
- How to test styles and media queries rendered by a React component with Jest and/or Enzyme
- How to test a React component that update over time with Jest and Enzyme?
- How to Test a function with Jest and React
- Jest with React - How do you render an entire component and test it?
- How To Unit Test React Component With react-intl, react-router-dom v4 and TypeScript
- How to test React component with children using jest and enzyme?
- How to test asynchronous function with rtl and jest in React
- How to test if state of a component is changed by the function using jest and Enzyme in React TDD
- how to test component while passing boolean value with react testing library and jest
- How to test a className with the Jest and React testing library
- How to mock React component methods with jest and enzyme
- Test a React Component function with Jest
- React prop types with TypeScript - how to have a function type?
- How to test a component with a nested container with React and Redux?
- How to test form submission in React with Jest and Enzyme? Cannot read property 'preventDefault' of undefined
- How to test snapshots with Jest and new React lazy 16.6 API
- How to use jest.spyOn with React function component using Typescript
- How to test the state of a functional component in React with Jest (No Enzyme)
- How to read console.log from a mounted component with Enzyme and Jest in Create React App
- Testing debounced function in React component with Jest and Enzyme
- How to mock a React component lifecycle method with Jest and Enzyme?
- how can I test if useState hook has been called with jest and react testing library?
- How to test if a React component contains another component with Tape and Enzyme?
- How to test redux state update with react testing library and jest
- How to test a React component that uses context like in react-router 2.0 with Jest 0.8.x
- How to test functions in React with Jest and Enzyme
- Stateful React component with async function failing Jest test
More Query from same tag
- How do I create a react hook that sets up async listener?
- Module not found: Error: Can't resolve in webpack.common.js
- ReactJS: submit form onChange
- React/Redux - Passing props from one container to another
- Reactjs - Submitting multiple lines from one textarea
- extract value from url using react router
- How to: React serialise multidimensional array and unserialise it in PHP
- Adding values to a state array in React
- Create-React-App not working in Edge Browser
- Facing - 'Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data'
- search results highlight results using reactjs
- Can't import Svg icons in material-ui@next
- nextjs with i18next and i18next-node-fs-backend
- return function returning Expected an assignment or function call and instead saw an expression
- Extracting schema from a mongoose schema file
- Play/Pause video onScroll in Reactjs
- How to make background shown on pulldown Black instead of white on safari mobile web with React
- Action creators fire differently in Redux, how to deal?
- React Hook Form v7, the POST request is sent every time I type on a field
- React component missing elements of props
- React error : TypeError: props.globalChange is not a function
- Background image not set for React button
- React: setState is not rendering the page again
- Material-UI vertical ToggleButtonGroup style error with border
- Socket connection not getting established when using https
- react-spring: using useChain to scale and translate
- How to unit test Next.js dynamic components?
- Deploying new Webpack bundle causes error until page refresh
- Invalid hook call React while fetching data from an API
- Axios Delete request with body and headers?