I am new in react unit testing. I want to do react material auto complete unit testing, but facing below error while unit test case execution

Expected container to be an Element, a Document or a DocumentFragment but got string.

Example is at my code link

Here is the test code

import App from "./App.js";
import {
  render,
  screen,
  fireEvent,
  getByTestId,
  waitFor,
  within,
  getByLabelText,
} from "@testing-library/react";
import userEvent from "@testing-library/user-event";

describe("App", () => {
  test("renders App", async () => {
    render(<App />);

    const BUButton = screen.getByRole("radio", {
      name: "Male",
    });
    fireEvent.click(BUButton);

    const qualification = screen.getByRole("radio", {
      name: "Under graduate",
    });
    fireEvent.click(qualification);

    const autocomplete = getByTestId("autocomplete-search");
    const input = within(autocomplete).getByRole("textbox");
    autocomplete.focus();
    // the value here can be any string you want, so you may also consider to
    // wrapper it as a function and pass in inputValue as parameter
    fireEvent.change(input, { target: { value: "IN" } });
    fireEvent.keyDown(autocomplete, { key: "ArrowDown" });
    fireEvent.keyDown(autocomplete, { key: "Enter" });

    let submitButton = screen.getByText("Submit", { selector: "button" });
    fireEvent.click(submitButton);
    console.log("submitButton called");
  });
});

I am new in react unit testing. I want to do react material auto complete unit testing, but facing below error while unit test case execution

Expected container to be an Element, a Document or a DocumentFragment but got string.

Example is at my code link

Here is the test code

import App from "./App.js";
import {
  render,
  screen,
  fireEvent,
  getByTestId,
  waitFor,
  within,
  getByLabelText,
} from "@testing-library/react";
import userEvent from "@testing-library/user-event";

describe("App", () => {
  test("renders App", async () => {
    render(<App />);

    const BUButton = screen.getByRole("radio", {
      name: "Male",
    });
    fireEvent.click(BUButton);

    const qualification = screen.getByRole("radio", {
      name: "Under graduate",
    });
    fireEvent.click(qualification);

    const autocomplete = getByTestId("autocomplete-search");
    const input = within(autocomplete).getByRole("textbox");
    autocomplete.focus();
    // the value here can be any string you want, so you may also consider to
    // wrapper it as a function and pass in inputValue as parameter
    fireEvent.change(input, { target: { value: "IN" } });
    fireEvent.keyDown(autocomplete, { key: "ArrowDown" });
    fireEvent.keyDown(autocomplete, { key: "Enter" });

    let submitButton = screen.getByText("Submit", { selector: "button" });
    fireEvent.click(submitButton);
    console.log("submitButton called");
  });
});

• reactjs
• unit-testing
• autocomplete

• I added the test code from the CodeSandbox link to the question. – Raghavendra N Commented Feb 23 at 11:56

1 Answer 1

Access getTestById from the screen object instead of directly importing it.

Example from the docs:

import {render, screen} from '@testing-library/react'

render(<MyComponent />)
const element = screen.getByTestId('custom-element')

If you directly import the getTestById, then you need to pass an instance of HTMLElement.

So in your case you need to replace this line:

const autocomplete = getByTestId("autocomplete-search");

with this one:

const autocomplete = screen.getByTestId("autocomplete-search");

I also fixed another error in your test by using getByRole("combobox") instead of getByRole("textbox").

Full test code:

import App from "./App.js";
import {
  render,
  screen,
  fireEvent,
  waitFor,
  within,
} from "@testing-library/react";
import userEvent from "@testing-library/user-event";

describe("App", () => {
  test("renders App", async () => {
    render(<App />);

    const BUButton = screen.getByRole("radio", {
      name: "Male",
    });
    fireEvent.click(BUButton);

    const qualification = screen.getByRole("radio", {
      name: "Under graduate",
    });
    fireEvent.click(qualification);

    const autocomplete = screen.getByTestId("autocomplete-search");
    const input = within(autocomplete).getByRole("combobox");
    autocomplete.focus();
    // the value here can be any string you want, so you may also consider to
    // wrapper it as a function and pass in inputValue as parameter
    fireEvent.change(input, { target: { value: "IN" } });
    fireEvent.keyDown(autocomplete, { key: "ArrowDown" });
    fireEvent.keyDown(autocomplete, { key: "Enter" });

    let submitButton = screen.getByText("Submit", { selector: "button" });
    fireEvent.click(submitButton);
    console.log("submitButton called");
  });
});

See it working in this CodeSandbox demo.