Error while testing React component using Jasmine

Question

I kept getting this error while testing a react component:

Error: Invariant Violation: findComponentRoot(..., .0): Unable to find element. This probably means the DOM was unexpectedly mutated (eg, by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``.

Code I used to test:

describe(`Method: flattenData`, () => {

  const tests = [
    {
      toFlatten: {
        'key1': 'k',
        'key2': 'n',
        'key3': 'o'
      },
      expectedResult: 'key1: k; key2: n; key3: o'
    }
  ];

  tests.forEach((test) => {

    expect(instance.flattenData(test.toFlatten)).toEqual(test.expectedResult);

   });

});

Answer 1

I fixed this bug by adding a parameter to the render call. This forces the component (which is just a <td> </td> to be rendered inside a table.

Before:

[container, instance] = render(TableCell, {
  data: `content`,
  dataTh: `content`,
  key: `content`,
  dataLocator: `content`
});

With the fix:

[container, instance] = render(TableCell, {
  data: `content`,
  dataTh: `content`,
  key: `content`,
  dataLocator: `content`
}, `table`);