I'm using the pokeapi to return basic information about a pokemon from the pokeapi. Nothing is being rendered to the component. Not even the default value passed as a parameter(pikachu). When I inpspect the XHR response with the dev tools, a response object is being returned but it's not being displayed. Any suggestions?
I have a link to the sandbox code.
https://codesandbox.io/s/blissful-mountain-jvbwc?file=undefined
Ahh i see the issue
You need to change your searchPokemon method to use an arrow function because non-arrow functions are not this binding.
Another issue, you should update you catch statement to use console.error so you can see the error message in the console.
Related
I created this CodeSandbox so I could demonstrate a problem with related code (the onChange not firing in a test):
https://codesandbox.io/s/festive-tree-xkw8s?file=/src/App.test.js
However in CodeSandbox I can't even get that far because as soon as I call
userEvent.type(securityField, 'abc{enter}')
I get a set this error in the console:
Error: Uncaught [TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.]
and as a result the loadOptions callback of AsynSelect is never triggered (locally I'm not having any issue with that, just the onChange which isn't firing).
I have not been able to find any examples of or guidance on this error. I haven't used CodeSandbox a lot so maybe I'm missing something basic.
I am not seeing this error in my local environment but I am trying to solve it because I want to finish setting up my original problem.
You want to use react-select-event for interacting with your react-select in testing. This was made specifically for testing with react-testing-library.
I am doing a react application and I want to fetch data from an api using the useEffect hook. I am receiving the data, but I am having trouble when trying to display 1 of the items in the received object. I have no problem displaying the other items from the data that I want.
When I look at the returned data in the console I see that the property I am trying to display (and gives me error) is actually object nested inside an array.
The error that I get is "TypeError: Cannot read property '0' of undefined"
I think that the problem is that not all data is loaded in the time when it renders, but not sure how to handle this. The problem is the "coinData.description[0]". Is my approach correct
Here is my component:
Componet First Part
Compoent Second Part
The problem is on row 36 in the second picture
Thanks in advance !
The setCoinData will set the whole answer of your request.
The problem is that property does not exist or that you are trying to render before your fetch was finished.
For the first case you can check the answer with a console.log().
In the second case you can use optional chaining to avoid this error.
Details about my goal:
I want to create a React App with Material UI that detects gender on the basis of your name.
Summary of the problem:
I am not getting back the result for the name that is entered into the input field
Expected Result:
{name: "Alice" gender: "female", probability: 0.83, count: 3387}
Actual Result:
null
undefined
{data: "Data was undefined"}
Useful resources for this issue:
This is the link to the CodeSandBox for this problem: click here --see what I have tried
Gender.io API link (I used this API to detect gender): click here
Material UI for React: click here
I think your code is a little over-engineered, and doesn't properly handle the asynchronous nature of the request.
What I typically do is return the fetch or axios object so that the calling component can wait for the response and handle it when it's ready.
Forked example
As you can see, I've removed a couple of pieces from your Container.jsx component (which might need a different name fwiw).
Instead of setting a flag for the form being ready to submit, I just have the button directly calling the fetchNameData function.
The checkGender function from your utilities function now directly returns the axios object, which is a promise. The fetchNameData function is async so it can wait for the results from this promise.
The code works fine, if the name starts with a lowercase, it will throw an error, so what you can do is capitalize the first letter of the user input
Help me pls with this issue:
I'am using mobx-state-tree + React + mobx + Socket.io ,i'm writing chat for project,and using for connection socket.io
From server i get chats list and then put him to mobx-state-tree store using action,then i want get data from mobx-state-tree store and use map function for render elements
But,i catch two errors
This is my mobx-state-tree model for chat
enter image description here
this is my code where i trying to maping data
enter image description here
this is issue
enter image description here
But error "user" undefined is very stranger,because when i use console.log() for display data,array has this data and displayed in console
Okay,i find problem with Reaction[observerobserved] this happens because component which render chat list was not wrapped into observer function
But i'm still have problem with undefined props of array when i call map method on him
Resolve for |Reaction[observerobserved]"
Need wrapped component into observer() function for subscribing on changes
For second problem, with undefined prop:
first solution wrong on the screen, because you try get undefined index in this case 'item.chat_users[index]", solution is use map for chat_users array to, and then render inner item for this data "item.chat_users.map(....)"
I'm trying to test clicking a button on a registration app to make sure that the page correctly navigates to the right page.
When I console.log out response in the code it returns an array that looks like this
[undefined, null]
However when I take a screenshot of the page or check the url, the click and navigation worked. It is on the correct page.
I don't understand why this is returning undefined/null. Also, I could not figure out how to test which function was being called when you click on the button.
I wanted to be able to see the actual function that is being called.
I'm using AngularJS 1.6, Mocha, Puppeteer 1.11, and Node 6.4.0
I'm also a junior dev so it could be something simple that I just didn't understand, please help!
it('should rederict to guest_sms_code state when clicking \'I have a guest code\'', async (function () {
var response = await (Promise.all([
page.waitForNavigation({waitUntil: 'domcontentloaded'}),
page.click('[ng-click="enterSmsCode()"]'),
]));
var url = await (page.url());
if (url.indexOf('guest_sms_code') === -1) {
assert.ok(false, 'The URL does not contain \'guest_sms_code\'')
}
}))
I'm not convinced that you can tell which method is called from a UI test. That's something that a JavaScript unit test can prove using, say, something like Mocha or Jest to test your codes behaviour. However an automated UI test, from my experience, won't tell you that. After all, you're trying to hide the inner workings of your app from an external user, right?
As for why the Promise.all([]) call is returning [undefined, null], well I can at least help you with that.
Firstly, you should have a look at the API documentation for both methods you've invoked in your test:
waitForNavigation docs: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagewaitfornavigationoptions
click docs: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageclickselector-options
In the case of waitForNavigation the response actually returns a Promise which may or may not have a Response value. Whether any data is returned with that Response is dependent on the navigation that occurs in the UI. In your case, you're seeing that undefined value in your array to indicate that there has not been any Response data returned from the navigation.
For the click method, this also just returns a resolved or rejected Promise with no data of any kind returned. So, naturally, you've no actual value returned here at all hence the null value being pushed to the array.