score:2
in short:
it("", async () => {
axios.get.mockimplementationonce(() => promise.resolve({ data: slides }))
const tree = renderer.create(<carousel />);
await promise.resolve();
expect(tree.tojson()).tomatchsnapshot()
})
should do the job
in details: besides you have mocked call to api data is still coming in async way. so we need tomatchsnapshot
call goes to end of microtasks' queue. settimeout(..., 0)
or setimmediate
will work too but i've found await promise.resolve()
being better recognizable as "everything below is coming to end of queue"
[upd] fixed snippet: .tojson
must be after awaiting, object it returns will never be updated
score:0
the accepted answer started to fail the next day. after some tweaking, this seems to be working:
import react from "react"
import renderer from "react-test-renderer"
import axios from "axios"
import carousel from "./carousel"
jest.mock("axios")
const slides = sampleapiresponse()
const mockedaxiosget = new promise(() => ({ data: slides }))
axios.get.mockimplementation(() => mockedaxiosget)
// eventhough axios.get was mocked, data still comes anychrnonously,
// so during first pass state.slides will remain null
it("returns null initally", () => {
const tree = renderer.create(<carousel />).tojson()
expect(tree).tomatchsnapshot()
})
it("uses fetched data to render carousel", () => {
const tree = renderer.create(<carousel />)
mockedaxiosget.then(() => {
expect(tree.tojson()).tomatchsnapshot()
})
})
function sampleapiresponse() {
return [
{
id: "114",
reference_date: "2018-07-02",
...
},
{
id: "114",
reference_date: "2018-07-02",
...
},
]
}
Source: stackoverflow.com
Related Query
- How to take a jest snapshot after axios fetched data in componentDidMount?
- How to modify data after waiting for it to be fetched react axios
- How to get a data after react select using axios and ReactJS?
- Take Snapshot after componentDidMount resolve a promise
- how to re-render after getting axios response in jest test
- How to pass an array of data to one component to another component using history.push in ReactJs when fetched using Axios
- How to set state after data was fetched
- how to get data into an array after post using axios in reactjs
- How to fetch just one time ( stop fetching data after one is fetched )
- how to hide the Row if there is no data fetched from backend server using axios in reactjs
- How to fetch data asynchronously in componentDidMount by Axios
- How can I add raw data body to an axios request?
- How Snapshot testing works and what does toMatchSnapshot( ) function do in Jest Snapshot testing for React components?
- How to cache fetched data in react without redux
- How to fetch API data from Axios inside the getServerSideProps function in NextJS?
- How to use getStaticProps in _app.js for showing data fetched from api in every pages in Next.js
- How to send body data and headers with axios get request?
- How to use map() with data from axios response?
- React Redux, rerendering after data was fetched and mapped into component?
- How to get CSS style in snapshot with Jest
- How do I access data returned from an axios get to display on a web page using react js?
- React: how to force state changes to take place after setState
- NextJS how to fetch data after click event?
- using useEffect in combination with Axios fetching API data returns null - how to deal with this?
- How to edit react bootstrap table and save data after editing
- React Hooks: how to wait for the data to be fetched before rendering
- React - how to rerender component after POST data to database (mongodb)
- How to generate a unique id automatically for the data that is posted to an API server using axios library in redux
- How can I mock axios API calls? with using jest
- React JS & Axios Render after getting response data
More Query from same tag
- how can I get result axios post in react?
- Trouble with React Router in deploy
- Show only every 4th item from api data in ReactJs
- How to convert object data to dropdown options?
- nextjs: Warning: Prop `className` did not match. Server: "x" Client: "y"
- React - How to Populate and Show a Modal, then Send AJAX Request on Submit
- Taking the initial values of an object using useState hook in React
- How can i use useParams() with an onClick button to navigate to different pages and display the data in react.js?
- React-select default behaviour and custom looking
- How to display nested labels in multiple lines?
- Create a Typescript + React common library
- How to make some values default vaslues and enable and other no default and disbale in an admin dialog which activate contact form fields
- Set the filename for file download with use of Fetch()
- React Material UI, how do I make mobile friendly selects?
- Avoiding stale state in dynamically created functional components
- Cannot fetch redux state from component
- Any issues using useEffect this way?
- How do you incrementally update a list in React?
- Bootstrap form onSubmit and onClick is not firing the expected function. Button works when outside form component
- Why do I have to click TextField twice in order for my list to display?
- React passing props cannot read property of undefined
- How to test axios requests in jest
- How to selectively setState for an object with two array of objects?
- ES6 destructure to "this"
- Set a background for my page in React
- React Hooks - Component not updating when object is sorted
- Add a unique ID to each menu item in Material UI TablePagination
- How to access array from another file Next Js
- Missing closing parenthesis in kendo React
- How can I center text in a button component using styled-components?