Stack Overflow
Stack Overflow

Questions tagged [react-test-renderer]

This package provides an experimental React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment.

This package provides an experimental React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment.

Essentially, this package makes it easy to grab a snapshot of the "DOM tree" rendered by a React DOM or React Native component without using a browser or jsdom. Read more about it here: https://github.com/facebook/react/tree/master/packages/react-test-renderer

164 questions
111
votes
8 answers

How to test a react component that is dependent on useContext hook?

I have a component that uses useContext and then its output is dependent on the value in the context. A simple example: import React, { useContext } from 'react'; const MyComponent = () => { const name = useContext(NameContext); return…
bensampaio
  • 3,266
  • 5
  • 21
  • 19
32
votes
5 answers

Testing React components that fetches data using Hooks

My React-application has a component that fetches data to display from a remote server. In the pre-hooks era, componentDidMount() was the place to go. But now I wanted to use hooks for this. const App = () => { const [ state, setState ] =…
mthmulders
  • 9,483
  • 4
  • 37
  • 54
28
votes
2 answers

Jestjs how to test function being called inside another function

For testing I use jest and react-test-renderer. It should be simple to test, however I have a hard time finding the proper example. I have tried to do something like that (in general I keep the functions in separate files): utils.js export const…
Dune
  • 674
  • 1
  • 9
  • 19
25
votes
2 answers

react-test-renderer's create() vs. @testing-library/react's render()

I'm new to React and confused about all the testing libraries. I got my test code to work but it seems redundant to have to call create() from react-test-renderer in order to use its toMatchSnapshot() and have to call render() from…
Michael Osofsky
  • 11,429
  • 16
  • 68
  • 113
21
votes
4 answers

ReactTestUtils has been moved

I'm starting learning React and while I was doing some tests i noticed two warning messages: Warning: ReactTestUtils has been moved to react-dom/test-utils. Update references to remove this warning. Warning: Shallow renderer has been moved to…
celsomtrindade
  • 4,501
  • 18
  • 61
  • 116
12
votes
1 answer

React snapshot testing - react-test-renderer vs. react-testing-library

I am trying to do snapshot testing in my React app. I am already using react-testing-library for unit testing in general. However for snapshot testing I have seen different ways of doing it on the net, either using react-test-renderer or…
Naresh
  • 23,937
  • 33
  • 132
  • 204
11
votes
5 answers

How to test snapshots with Jest and new React lazy 16.6 API

I have to components imported with the new React lazy API (16.6). import React, {PureComponent, lazy} from 'react'; const Component1 = lazy(() => import('./Component1')); const Component2 = lazy(() => import('./Component2')); class…
Albert Olivé Corbella
  • 4,061
  • 7
  • 48
  • 66
11
votes
0 answers

Error message "console.error in react-test-renderer" (although test still passes)

This is my root component: const App = () => ( }> ) export default App And a…
Philip S
  • 502
  • 6
  • 18
10
votes
2 answers

React Test Renderer: findAllByProps return double of what It should find when looking for testID in React Native

I'm using React Test Renderer with Jest to test my React Native app. Here is a simple code example of what I'm doing: it('renders one text', () => { const text = 'bar'; const instance = renderer.create(
J. Hesters
  • 13,117
  • 31
  • 133
  • 249
9
votes
1 answer

How can I check whether an element is visible with Jest?

I have a straight forward react-comp. which I want to test the styling depending on the react state. The comp looks like the following: React-comp. const Backdrop = ({ showBackdrop }) => { const backdropRef = useRef(); function…
MarcoLe
  • 2,309
  • 6
  • 36
  • 74
9
votes
1 answer

React Jest test fails to run with ts-jest - Encountered an unexpected token on imported file

I'm new to testing React/Typescript apps. I want to unit test my React components, because I'm not satisfied to develop apps without tests at all. The app itself works fine, it's just failing to run in test mode. command (alias for react-scripts…
naXa stands with Ukraine
  • 35,493
  • 19
  • 190
  • 259
8
votes
1 answer

Can't test Material-ui Modal with react test renderer

When trying to write a simple test with jest lib for Modal component like this import { Modal } from '@material-ui/core'; import React from 'react'; import TestRenderer from 'react-test-renderer'; describe('Material Modal test', () => { it('It…
MisiekPushUpek
  • 81
  • 1
  • 3
8
votes
1 answer

react-testing-library render VS ReactDOM.render

We used to work with reactDom.render for our testing. We started having problems when trying to test function component. In these case, the tests continued before all hooks were processed. I started looking for a solution, and I found out that…
Noam antebi
  • 271
  • 2
  • 9
7
votes
2 answers

How can mock the value of a state and data in my react test

I'm writing tests for my react page but my page uses an isLoading in its state, when loading the page renders 'Loading', when loaded but no data (from the fetch request) is renders 'No data found' and when loaded with data (from the fetch request)…
Reeves62
  • 139
  • 1
  • 3
  • 13
7
votes
1 answer

React Typescript tests - Target container is not a DOM element

I'm new to testing React/Typescript apps. command (alias for react-scripts test): yarn test output: FAIL src/containers/pages/Feature/Feature.test.tsx ● Test suite failed to run Target container is not a DOM element. 17 | const {…
naXa stands with Ukraine
  • 35,493
  • 19
  • 190
  • 259
1
2 3
…
10 11