Questions tagged [react-testing]

116 questions
1
vote
1 answer

Antd Date Picker Jests with React-testing-library not setting the input value

I am using the range date picker of antd (v4.x). In my test file I'm doing the following : fireEvent.change(rtl.getByPlaceholderText('Start date'), { target: {…
1
vote
1 answer

React Js API call Jest Test Case?

I am trying to write test cases for my API call function and I don't know where is the error that I could not run my test successfully here is the API call function Code and test Cases code. export async function getUserTest() { …
ROHIT RAJ
  • 198
  • 2
  • 9
1
vote
0 answers

How I test an async function which fetch data from another function in React Component?

I am new to React Testing. I want to test an async function that fetches rick and Morty data from API in React Component. CharacterInfo.js import React,{ useEffect, useState } from 'react'; import { episodeFetch } from '../../Service/API'; import…
1
vote
0 answers

Enzyme Chai React Test_TypeError: Cannot add property value, object is not extensible

I am a fresh React and Javascript developer. I have installed Chai and Enzyme for the dog example's react tests and created all test files. File structure is as…
Ashley Koo
  • 11
  • 2
1
vote
1 answer

jest testing library - mocking reject promise not working as expected for function within useAsync()

I am using useAsync() hook within my function component. This component is rendered at last step of material-ui stepper after next button is clicked in previous step, which is a separate component. const memberStatus = useAsync(async () => { …
Alwaysalearner
  • 85
  • 1
  • 1
  • 10
1
vote
0 answers

How to test if a button is conditionally enabled in React Testing Library / Jest

I need to test if a button is conditionally enabled after text inputs are filled out. Right now simply checking to see if they are disabled works with the…
1
vote
1 answer

React Test doesnt find element by text after state change

I have an LoginForm component which accepts a login callback and renders a login form. When login returns a rejected promise the message is displayed in the component. This is the behavior I want to test. Im using create-react-app environment with…
Code Spirit
  • 3,992
  • 4
  • 23
  • 34
0
votes
0 answers

why react hooks uses stale data in an inconsistent way

I am looking at example at https://github.com/mrdulin/react-act-examples/blob/master/sync.md function App() { let [counter, setCounter] = useState(0); return ; } test one, it…
lch
  • 125
  • 7
0
votes
1 answer

Writing resilient test in playwright despite the application not having reliable attributes in HTML structure

Background : There is an old code base in React where I am writing E2E Playwright tests. Almost 80% of the codebase doesn't have valid role attributes in html elements, input elements are implemented via a plain div, buttons are implemented via div,…
utkarsh-k
  • 836
  • 8
  • 17
0
votes
1 answer

How to mock fetch calls for two different fetch calls and give custom data as a parameter to both of them?

I've 2 different fetch calls in my component const fetchPopularCuisines = async() => { const data = await fetch(URL2) const jsonData = await data.json() setPopularCuisines(jsonData?.data?.cards[1]) } const fetchSuggestions = async()…
0
votes
2 answers

How to test useFormContext(react-hook-form) using jest

I have a CDOB component and a DOB component that are using Mds form elements and react-hook-form's useFormContext. I want to write a test case for the useFormContext methods such as watch. Here is the code for the components: export default function…
CoderInUi
  • 126
  • 2
  • 4
  • 11
0
votes
0 answers

Bugs while testing react for asynchronous tasks, Unable to find an element by: \[data-testid="reload-button"\]

** Unable to find an element by: [data-testid="reload-button"]** Facing issues when testing a create-react-app using RTL. I've a simple react project wherein I'm making a call over the internet to display a list of users. While writing a testcase…
0
votes
0 answers

How to write unit testing for function that return dom element based object

I'm writing the unit testing in react testing library. I have a function that returns an object. under the I have a dom element in a key-value pair I tried searching in google. couldn't able to find the solution. here is the function export const…
Vinoth
  • 972
  • 1
  • 16
  • 47
0
votes
0 answers

How to test if function is called after clicking attachFiles button in Body component using React Testing Library in composite components?

I am new to react and currently I am trying to write unit test cases for my component but facing several issues, Failed: "Test failed because it logged error to the console: Warning: React.createElement: type is invalid -- expected a string (for…
0
votes
1 answer

Why do I need waitFor or act instead of just using await in react testing?

I read that act / waitFor is to wait until the DOM is updated. I've also read that Render is synchronous. I assume that I don't need to wrap a Render with act/waitFor as the DOM will always be updated by the time I do a click or a test ? Is this…
EBDS
  • 1,244
  • 5
  • 16