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

How to pass in props to snapshot test React native typescript?

i am very new to testing and im trying to create a simple snapshot test for a presentational component that accepts props. Am I suppose to 'mock' some props? Also I am not using ts-jest as im not sure if i should. NutritionValue.tsx interface Item…
benwl
  • 366
  • 2
  • 17
2
votes
1 answer

Jest Snapshot Testing Wait till Component Renders

I feel like I am missing something when it comes to testing React components with async fetch operations. I have a following component like this... export default function Page() { const [result, setResult] = useState(); async function…
2
votes
2 answers

How correctly write Jest test for avoid act() warning?

useEffect usually use Promises for update state. This updates cause long warning in jest: Warning: An update to null inside a test was not wrapped in act(...). How correctly write Jest Test for such case? live example, Reproducible…
2
votes
1 answer

How to write test cases for Select Box onChange Method in React Testing Library?

I have a Select Box and set the data in a state by the onChange event. Please have a look at the below code. Anyone can help me to write cases for this onChange event in React Testing Library. const [optionValue, setOptionValue] = useState({ value:…
2
votes
1 answer

Is there a way to test Chakra-ui modal dialogs with react-test-renderer?

I'm desperately trying to test a modal but can't get my head around it! This is where I'm at: expect( create(
Ploppy
  • 14,810
  • 6
  • 41
  • 58
2
votes
0 answers

Component working fine being rendered but failed at snapshot testing

I've created a simple component that wrapped SVG as below: import React from 'react'; import CheckOutline from '../../assets/svg/check-outline.svg'; import Check from '../../assets/svg/check.svg'; interface ISvgIconProps extends SvgProps { name:…
Isaac
  • 12,042
  • 16
  • 52
  • 116
2
votes
0 answers

How to test a component that receives a ref as props?

I want to snapshot a component in React using react-test-renderer. The component I want to test receives a ref from another component. The component I'm testing relies on a function implemented by the component which is passing the ref as…
Otavio Bonder
  • 1,789
  • 4
  • 17
  • 35
2
votes
1 answer

Facing Warning: Failed prop type: Invalid prop `source` supplied to `Image`. when running jest testcase in react-native (expo)

Below is the code for error: Warning: Failed prop type: Invalid prop 'source' supplied to 'Image'. const ParentComponent = () => { return ( ); } I've defined name config in package.json as…
Abhishek Jain
  • 630
  • 6
  • 26
2
votes
2 answers

Jest: Testing React state change in useEffect

I am new at Jest and Enzyme, and am struggling to write a unit test to check if my component renders correctly when a certain state value exists. Below is my code: //Auth.js export const Auth = ({ children }) => { const [authStatus,…
aieyan
  • 123
  • 4
  • 7
2
votes
0 answers

Tests are failing

I am trying to run Jest test runner on my react project and I am using third-party UI library called semantic-ui-react. When I write simple tests and run then, they are running successfully but when I import any component from semantic-ui-react and…
Alok Joshi
  • 96
  • 5
2
votes
0 answers

Unable to cover unit test cases fo React components having props

I have a component with the below code:- import React from "react"; import { Box, Grid } from "@material-ui/core"; import ArrowBackIosIcon from "@material-ui/icons/ArrowBackIos"; import SearchOutlinedIcon from…
2
votes
1 answer

How to Unit test the rendering of a child component in the parent component using react testing library?

I cannot post the original code here ,so i will try to explain what i want to achieve. So,my component displays message.This message is part of a child component which is being rendered in the parent component.So,i want to unit test this logic.But i…
CodeOfLife
  • 295
  • 2
  • 11
2
votes
1 answer

Test multiple React component state changes using Test Renderer

The component that I am trying to test is having state isSubmitting which is set true when we try to submit the form and then it is set back to false when we receive the response from server. I want to test the state of component after each state…
Black
  • 9,541
  • 3
  • 54
  • 54
2
votes
1 answer

Testing of Nested React components using React-Test-Renderer

I have a pure React-Redux application and it is working as expected. The App.js import React, { useEffect } from "react"; import { useDispatch } from "react-redux"; import { Router, Route, Switch, Redirect } from "react-router-dom"; import history…
Subhadip Pal
  • 63
  • 1
  • 2
  • 12
2
votes
1 answer

How to test functional component with async callback inside useEffect using snapshots

I'm trying to write unit tests on my component, it looks like this. export const myComponent = ({text, list, getData = transport.getData}) => { const [rows, setRows] = React.useState([]); React.useEffect(() => { const fetchData = async…