'Create a React element in a Jest test with children

I am trying to write a unit test for a util which removes children that meet certain criteria from a passed parent element.

I am using React createElement to make this dummy element in my test. But I cannot figure out how to add the children that I need to subsequently remove as part of my test.

import remover from "./remover";
import { createElement } from "react";

let defaultArgs;

describe("Remover", () => {
  beforeEach(() => {
    defaults = {
      parentElement: createElement("div")
    };

    defaults.parentElement.createElement("#red"); // falls over here
    defaults.parentElement.createElement("#blue");
  });

  afterEach(() => {
    defaults.parentElement = null;
  });
});

The code falls over when I try to call createElement on my previously created React element.

defaults.parentElement is created as:

{
  '$$typeof': Symbol(react.element),
  type: 'div',
  key: null,
  ref: null,
  props: {},
  _owner: null,
  _store: {}
}

I am guessing I cannot add children elements as it's a React symbol? So how do I go about testing this?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source