The issue arises when attempting to use the onChangeText function outside of the component and it fails to work

I am currently facing an issue with my test where the onChangeText function does not update the value of the TextInput component as expected.

const TestComponent = ({onChangeText, value}) => {
return (<TextInput testID={'input'} onChangeText={onChangeText} value={value} />)
}

test('Update TextInput value on onChangeText', () => {
        const onChangeText = jest.fn()
        const value = 'initial input'

        const { getByTestId } = render(
            <TestComponent onChangeText={onChangeText} value={value} />
        );

        const input = getByTestId('input')
        fireEvent.changeText(input, 'updated text');
        expect(input.props.value).toBe('updated text');
    });

The test result still shows the initial value 'initial input' instead of the updated value 'updated text'. How can we ensure that the value gets updated when using the onChangeText prop in our test?

Answer №1

When a component receives input values as props, it suggests that there is an input field utilizing these values.

What this indicates is that your component is uncontrolled. In such cases, it is understandable why your test may not pass. This issue lies within the code itself rather than the library being used.

https://github.com/callstack/react-native-testing-library/issues/978

https://reactjs.org/docs/uncontrolled-components.html#:~:text=In%20a%20controlled%20component%2C%20form,form%20values%20from%20the%20DOM.

You can find more information about controlled and uncontrolled components by following the links provided above.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Accepting POST requests from an external source in AngularJS

I am currently working on an application that utilizes AngularJS 1.4.0 and requires the ability to receive POST data from an external source. In AngularJS, routes often use parameters in the URL format like this: .when('/section/:param', { t ...

My Next.js application does not display an error message when the input field is not valid

I've recently developed a currency converter application. It functions properly when a number is provided as input. However, in cases where the user enters anything other than a number or leaves the input field empty, the app fails to respond. I aim t ...

Is there a way to break this down so that I can obtain an array containing the data for each month?

My JSON structure is as follows: "meterConsumption": [ { "month": 1, "details": [ { "timestamp": "2020-01-01", ...

Remove any elements using jQuery that do not contain any content

I need to remove any empty elements from my HTML code. Here is an example of the HTML markup: The HTML markup is stored in a jQuery variable called 'myhtml' and it may contain various tags. <h1> <u> <strong></st ...

Issues arise when attempting to transfer strings through ajax to a Node.js server that is utilizing express.js

On my website, I am encountering a problem where certain characters are being lost when I send strings to my Node.js server. // Client: microAjax("/foo?test="+encodeURI("this is ++ a test"), function callback(){}); // Server: app.get('/foo',fun ...

When attempting to retrieve data from an API in Angular 8, I encountered difficulties in dynamically creating a formArray within a formArray

I am struggling to dynamically create form controls based on the data received, specifically for fields like task and template name. Your assistance is greatly appreciated. { "items": [ { "templatename": "Defult" ...

Combining two kebab-case CSS classes within a React component

import React from 'react'; import styles from './stylesheet.moudle.css' <div className={styles['first-style']} {styles['second-style']}> some content </div> What is the correct way to include styles[&ap ...

How is it possible that the previously functional code in React suddenly started throwing an error after a few weeks? Specifically, the error message reads: TypeError: Cannot read properties of undefined (reading 'slice

Just last week my code was functioning perfectly like this: function CreateUserCard({ user }) { const { name, birthday, _id, url, area } = user //......... //......... //......... return ( <div> <img src={ ...

When using window.open in Chrome on a dual screen setup, the browser will bring the new window back to the

When using the API window.open to open a new window with a specified left position in a dual screen setup (screen1 and screen2), Chrome behaves differently than IE and FF. In Chrome, if the invoking screen is on the right monitor, the left position always ...

The server experienced an issue and returned a response error code of 500 while working on a React Native project

Once I added the following libraries to my project: @react-navigation/native @react-navigation/bottom-tabs An error message started popping up: The development server returned response error code: 500 (React Native). Despite numerous attempts, I cou ...

What is the best way to detect if a user has reached the end of a container div while implementing Infinite Scroll

I am in the process of implementing infinite scroll on our website's dashboard, but I am currently facing a challenge in determining the bottom of the container div in my jsfiddle mockup. The original function works on a blank page with no container ...

extracting the value of a chosen radio button in AngularJS using HTML

When attempting to retrieve the selected value from a radio button, I am encountering an issue where choosing "teacher" still shows as "student." Here is the HTML file: <!DOCTYPE html> <html ng-app="phase2"> ... (HTML code continues) Rige ...

What is the best way to retrieve the source code generated by Ajax

I designed a PHP script that generates text dynamically and returns it with a unique div id. However, when I use Ajax to retrieve this text as responseText, I am unable to access the properties of the div using JavaScript because the new text is not added ...

Preparing JSON data for creating a wind map with Leaflet

I am currently working on converting netCDF data to JSON in order to use it with leaflet-velocity. This tool follows the same format as the output of grib2json used by cambecc in earth. An example of sample JSON data can be found at wind-global.json. By u ...

Next.js allows you to create a single page that corresponds to the root path '/' as well as a dynamic route '/param'

I have a single-page website built with Next.js. The home page, which displays a list of products, is located at route / and the corresponding code can be found in pages/index.js. Each product has an id, allowing users to jump directly to it using /#produc ...

AngularJS utilizes $location but includes a refresh option

Back when I used ui-router, I recall there was a command like $state.go('/',{reload:true}). However, with normal ngRoute, how can I navigate to a page and also refresh it? I haven't found any option in $location. ...

Tips for measuring the number of elements in a table using Angular

Need assistance with code for an Angular app that uses ngFor to populate a datatable. The goal is to count the number of columns with the name "apple" and display the total on a card named 'apples'. I attempted to create a function like this: ...

The date range picker displays the previous arrow but not the next arrow

I am currently using the DateRangePicker tool and for some reason, I am not seeing the arrow that should appear on the right side. I have double-checked my configuration but can't seem to figure out what is causing this issue. In the image attached, ...

Leveraging the Google Geocode API through HTTP GET requests

I am facing a challenge in my HTML file where I have a map and I am using HTTP get with jQuery to retrieve a device's location. However, I am struggling to plot this location on the map. I need to parse the location information and display it accurate ...

Adding data to a deeply nested array structure in MongoDB using Mongoose

My backend, built with Node.js using Express and MongoDB through Mongoose, features an array structure comprising three levels. At the third level, some files are stored. However, I now face the challenge of dynamically adding entries at any level based on ...