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
7
votes
2 answers

How to test Alert in React Native with Jest

So in my program, when a user logs in, if all credentials are correct they will proceed to the next page if any details are missing or incorrect format, and alert is shown on screen. How do I test using Jest in React Native if the alert has been…
LondonMassive
  • 367
  • 2
  • 5
  • 20
7
votes
3 answers

Jest - Testing modals in React gives error

I am using react-test-renderer with Jest to test react components. But if I test a react-mui modal dialog like this: describe('Dashboard', function () { let dashboard; beforeEach(async () => { testRenderer =…
Leff
  • 1,968
  • 24
  • 97
  • 201
6
votes
1 answer

Use unmountComponentAtNode or document.body.removeChild when teardown the test?

From this docs: https://reactjs.org/docs/hooks-faq.html#how-to-test-components-that-use-hooks The docs provide a way to setup and teardown the test like this: let container; beforeEach(() => { container = document.createElement('div'); …
Lin Du
  • 88,126
  • 95
  • 281
  • 483
6
votes
2 answers

TypeError: Cannot read property 'baseVal' of undefined

I am unit testing my react component using renderer of react-test-renderer. it was working fine, but after using ReactCssTransitionGroup I am getting the following error "TypeError: Cannot read property 'baseVal' of undefined". not sure how to…
Hammad Tariq
  • 344
  • 2
  • 7
5
votes
2 answers

Jest test passes but .. has console message You are trying to access a property or method of the Jest environment after it has been torn down

My test passes but has a console refrenceError: You are trying to access a property or method of the Jest environment after it has been torn down. Test: import {render, screen, cleanup, fireEvent, waitFor } from '@testing-library/react'; import…
Sole
  • 3,100
  • 14
  • 58
  • 112
5
votes
1 answer

Enzyme fail to find with constructor selector, but succeed with display name selector

I am using Jest and Enzyme for my React app testing. my folder structure looks like /src /__test__ /LevelComponents OuterComp.test.js /components /LevelComponents OuterComp.js /Widgets ChenDropdown.js OuterComp.js import React, {…
user2002692
  • 971
  • 2
  • 17
  • 34
5
votes
1 answer

Test unmounting with react-testing-library

I am confused by when/how a queried element get updated. For example: I have a button that counts up. And when it counts to 3, it disappears. import React, { useState } from "react"; export default () => { const [count, setCount] =…
davidx1
  • 3,525
  • 9
  • 38
  • 65
5
votes
1 answer

rootInstance.findByType("input"); Giving Expected 1 but found 2 instances with node type : "undefined"

So I have a component that shows some text fields. One input, one select and based on the input the user uses on that select, (The value of the select) the third is shown or not. Im trying to use React-Test-Renderer to test the first input field…
C-odes
  • 53
  • 1
  • 5
4
votes
1 answer

createRoot(...): Target container is not a DOM element in React Test file

I'm using React-18.0.0 in my project and in the test file I'm getting an error something below createRoot(...): Target container is not a DOM element. My test file is : import ReactDOM from 'react-dom/client'; import { render, screen } from…
KARTHIKEYAN.A
  • 18,210
  • 6
  • 124
  • 133
4
votes
0 answers

React test - how to test functions inside jsx rendered with render props

I would like to test the content of the jsx that gets rendered with render prop. I use react-test-renderer for testing. This is the Menu component that has a render prop which I would like to test:
Leff
  • 1,968
  • 24
  • 97
  • 201
4
votes
1 answer

Run useEffect hook before rendering jest snapshot in react-test-renderer test

Let's say I have the following basic component called Basic.js: import React, { useState, useEffect } from 'react'; export default () => { const [items, setItems] = useState([{ name: 'original' }]); useEffect(() => { setItems([{ name:…
Johnny Metz
  • 5,977
  • 18
  • 82
  • 146
4
votes
1 answer

How to test forwarded ref in React using test renderer or enzyme?

I use some amount of animations in my application and all animations depend on the refs (I am using GSAP). Most of the tested elements are located in other React components; so, I have set up forwardRef in my components to to pass the ref to the…
Gasim
  • 7,615
  • 14
  • 64
  • 131
4
votes
0 answers

Jest snapshot is null after react instance is updated

I would like to register a snapshot of a component after a button onPress function is run. This is my testsuite: describe('Login component', () => { // This runs fine. Snapshot OK it('Renders correctly', () => { const tree =…
jhc
  • 1,739
  • 3
  • 21
  • 46
4
votes
0 answers

How to write jest test cases for navigation in react

I am new to Jest test cases writing, Trying to write the test case for checking navigation in an react application. Currently I have written test case which works like below: I have Login page which is having register link on it, which redirects…
R.shitre
  • 51
  • 5
3
votes
1 answer

React testing error 'unable to find element with the text

I'm struggling to get my 2nd React test to pass. Here is my App.js file: import logo from './logo.svg'; import './App.css'; import {useState} from 'react'; import {Link, Route, Routes} from "react-router-dom"; import Home from…
Roblou
  • 35
  • 2
1
2
3
…
10 11