React component doesn't update while testing with react testing library-CodePudding

I am struggling to understand why this component doesn't update after I click on it with userEvent. I have a search bar, when focused === true, it expands, and has another field "Move in". This is my test that doesn't work and I don't get the search bar expanded after clicking.

describe("Searchbar tests", () => {
  let SearchBar = (
    <DesktopSearch
      wrapper={wrap}
      handleKeyDown={jest.fn()}
      handleChange={jest.fn()}
      availability={undefined}
    />
  );

  it("should have move in once focused", async () => {
    render(SearchBar);
    const searchDiv = await screen.findByTestId("search-location");
    await userEvent.click(searchDiv);
    expect(screen.getByText("Move in")).toBeInTheDocument();
  });
});

screen.debug()

  <body>
      <div>
        <div
          
        >
          <div
            
            data-testid="search-location"
          >
            <span
              style="width: 0px; opacity: 0;"
            >
              Search
            </span>
            <div>
              <span
                style="line-height: 0.5;"
              >
                Location
              </span>
              <input
                
                value=""
              />
            </div>
            <div
              
              style="width: 6.49676%;"
            />
          </div>
          <svg
            
            fill="currentColor"
            height="20"
            stroke="currentColor"
            stroke-width="0"
            viewBox="0 0 16 16"
            width="20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <title>
              Search
            </title>
            <path
              d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"
              fill-rule="evenodd"
            />
          </svg>
        </div>
      </div>
    </body>

Minimal example:

    import { SearchBarContext } from "context";
import { AnimatePresence, AnimateSharedLayout, motion } from "framer-motion";
import { ReactElement, useContext } from "react";
import { DeviceSearchProps } from ".";
import {
  AutocompleteContainer,
  SearchAvailability,
  SearchDate,
  SearchIcon,
  SearchInput,
  SearchLocation,
  SearchStyle,
} from "./desktopStyles";

    export default function DesktopSearch({
      className,
      wrapper,
      handleKeyDown: _handleKeyDown,
      handleChange: _handleChange,
      availability,
    }: DeviceSearchProps): ReactElement {
      const { focus, focused } = useContext(SearchBarContext);
      // [focused, setFocused] = useState(false),
      //focus = () => setFocused(true),
    
      return (
        <SearchStyle className={className} ref={wrapper}>
          <AnimateSharedLayout>
            <SearchLocation onClick={focus} layout>
              <AnimatePresence>
                <motion.span
                  initial={{ width: "0px" }}
                  animate={{
                    width: focused ? "0px" : "auto",
                    opacity: focused ? 0 : 1,
                  }}
                  transition={{ duration: 0.5, type: "string", delay: 0.2 }}
                >
                  Search
                </motion.span>
              </AnimatePresence>
              <div>
                <span style={{ lineHeight: 0.5 }}>Location</span>
                <SearchInput isFocused={focused} />
              </div>
              <AutocompleteContainer
                animate={{ width: focused ? "110%" : "90%" }}
                transition={{ duration: 0.2, type: "string" }}
              ></AutocompleteContainer>
            </SearchLocation>
    
            {focused && (
              <>
                <SearchDate>
                  <SearchAvailability
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                  >
                    {availability ? (
                      availability.toLocaleDateString("en-GB")
                    ) : false ? (
                      <>__ __ __</>
                    ) : (
                      "Move in"
                    )}
                  </SearchAvailability>
                </SearchDate>
              </>
            )}
            <SearchIcon size={20} />
          </AnimateSharedLayout>
        </SearchStyle>
      );

}

CodePudding user response：

The problem in this code is that the context doesn't exist when you render the component with react testing library. Try to add a