React: console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:104

[vineet-agrawal96]

Hi

I'm facing following issue when i'm run test case:-

console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:104
Warning: An update to Query inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
    in Query (at TicketTypes/index.js:19)
    in TicketTypes (at TicketTypes/index.test.js:42)
    in ApolloProvider (created by MockedProvider)
    in MockedProvider (at TicketTypes/index.test.js:41)

My test case is:-

import React from "react"
import { shallow } from "enzyme"
//import  { Templates }  from "./index"
import Adapter from "enzyme-adapter-react-16"
import { MockedProvider } from "@apollo/react-testing"
import { GET_TICKET_TYPE } from "./TicketTypesGraphQL"
import { TicketTypes } from "./index"
//import  renderer  from "react-test-renderer"
import TestRenderer from 'react-test-renderer';
import wait from 'waait';

  const mocks = [
    {
      request: { query: GET_TICKET_TYPE, variables: { isp_id: 877 } },
      result: {
        data: {
          listOfTemplate: {
            ticket_types : [
              {
                flag_default_print_notes: false,
                flag_is_print_content: false,
                flag_subscriber_report: false,
                ticket_template: "<p>Sanity test</p>",
                ticket_type_desc: "Connection",
                ticket_type_id: 12563,
              }
            ]
          },
        },
      },
    },
  ];

describe("TicketTypes", () => {
  const ticketTypes = shallow(<TicketTypes />)

  it("should render loading state initially", async () => {
    let component;
    TestRenderer.act(() => {
        component = TestRenderer.create(
          <MockedProvider mocks={mocks} addTypename={false}>
            <TicketTypes  />
          </MockedProvider>,
        );
    });
    await wait(0);
    TestRenderer.act(() => {
      const tree = component.toJSON();
      console.log("component ===========>", tree )
    });
  })
})

[threepointone]

Could you try this

describe("TicketTypes", () => {

  it("should render loading state initially", async () => {
    let component;
    await TestRenderer.act(async () => {
        component = TestRenderer.create(
          <MockedProvider mocks={mocks} addTypename={false}>
            <TicketTypes  />
          </MockedProvider>,
        );
    });

    const tree = component.toJSON();
    console.log("component ===========>", tree )
  })
})

explanation: The async version of act() will flush any resolved promises and update the tree.

If this doesn't solve your issue, I could help you further if you could make a codesandbox version, or a git repo that I could look at.

[threepointone]

We have docs on testing that might help you as well. https://reactjs.org/docs/testing-recipes.html

[threepointone]

I'm going to close this because I believe my solution would work; if it doesn't, please attach a codesandbox repro, or a git repo, and I'll be happy to have a look.