score:2

Accepted answer

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",
      ...
    },
  ]
}

Related Query

More Query from same tag