Type alias OptionsType<Queries, Wrappers, FireEvents, Scenarios>

Type declaration

• Optional fireEvents?: FireEvents

  An object whose values are tupples of keys of queries and names of events

  const render = create(Component, defaultProps, {
    queries: {
      button: {
        query: AccessorQueryType.Text,
        parameters: ["Click me"],
      },
    },
  
    fireEvents: {
      buttonClick: ["button", "click"],
    },
  });
  
  const engine = render({});
  
  engine.fireEvent("buttonClick");
  Copy

• queries: Queries

  An object whose values are queries to rendered elements, and keys can be used to access them

  const render = create(Component, defaultProps, {
    queries: {
      listItem: {
        query: AccessorQueryType.LabelText,
        parameters: ["the item of the list"],
      },
  
      navigation: {
        query: AccessorQueryType.Role,
        parameters: ["navigation"],
      },
    },
  });
  
  const engine = render({});
  
  const listItems = page.accessors.listItem.getAll();
  const navigation = page.accessors.navigation.get();
  Copy

• Optional scenarios?: Scenarios

  An object whose values are tupples of keys of queries and scenario functions. Scenario function is an asynchronous function whose first argument is the result of call get accessor of the query, and other arguments should be provided in the call of run function. Unlike the fireEvents, multiple events can be fired in one scenario. It can be useful for selecting of values in dropdowns and date pickers

  Example for react-datepicker@4.21.0

  const render = create(Component, defaultProps, {
    queries: {
      dateInput: {
        query: AccessorQueryType.QuerySelector,
        parameters: [".react-datepicker__input-container input"],
      },
    },
  
    scenarios: {
      changeDatepicker: [
        "dateInput",
        async (element, day: number) => {
          act(() => {
            fireEvent.focus(element);
          });
  
          const listbox = await screen.findByRole("listbox");
  
          const dayButton = within(listbox).getByText(`${day}`, {
            ignore: ".react-datepicker__day--outside-month",
          });
  
          act(() => {
            fireEvent.click(dayButton);
          });
        },
      ],
    },
  });
  
  const engine = render({});
  
  await engine.run("changeDatepicker", 1);
  
  expect(engine.accessors.dateInput.get()).toHaveProperty(
    "value",
    "10/01/2023",
  );
  Copy

• Optional wrapperDefaultParams?: {
      [Key in keyof Wrappers]: Parameters<Wrappers[Key]>[1]
  }

  Default parameters of wrappers, see wrappers property

• Optional wrappers?: Wrappers

  An object whose values are wrappers, and keys can be used to access them

  A rough example:

  const AwesomeContext = createContext(0);
  
  const render = create(Component, defaultProps, {
    queries: {},
  
    wrappers: {
      awesome: (children, initialValue) => {
        let value = initialValue;
  
        const getActualValue = () => value;
  
        return [
          <AwesomeContext.Provider value={value}>
            {children}
          </AwesomeContext.Provider>,
          getActualValue,
        ];
      },
    },
  
    wrapperDefaultParams: {
      awesome: 0,
    },
  });
  
  const engine = render({}, {
    wrapperParams: {
      awesome: 3,
    },
  });
  
  const awesomeValue = engine.wrappers.awesome();
  Copy

  See an example https://github.com/vtaits/react-integration-test-engine/blob/main/packages/react-integration-test-engine/src/tests/wrappers.test.tsx