Rendering shallow makes a Fragment into a <p>

[remko79]

Shallow rendering this: <><ComponentX /></> Creates this: <p><ComponentX /></p>

Is that intended behaviour? Why not just <ComponentX />

[rschristian]

Could you provide a reproduction by any chance? I'm unable to reproduce this behavior. Everything seems to be correct from my quick testing.

JSX vs h calls (as the above example uses) shouldn't be an issue, you can copy/paste the following into CodePen or something to see the same result:

import { h, Fragment, render } from "https://cdn.skypack.dev/[email protected]";
import { shallowRender } from "https://cdn.skypack.dev/[email protected]";

/* @jsx h */
/* @jsxFrag Fragment */

const ComponentX = () => <h1>Hello World</h1>;
const result = shallowRender(<><ComponentX /></>);

render(<h1>{result}</h1>, document.body);

Not sure what would cause this though.

[remko79]

Thanks for your reply. I've done a bit further investigation into when this exactly happens.

So I have a (simplified) component in file 'index.jsx':

export default function Header() {
  return (
    <>
      <div>Test</div>
    </>
  );
}

And then if you render this with these commands:

import { render, shallowRender } from 'preact-render-to-string';
import Header from './index';

console.log(shallowRender(<Header />));
console.log(render(<Header />));

You will notice that the shallow rendering outputs: <p><div>Test</div></p> and the normal one: <div>Test</div>.

Now of course you could render it using:

    console.log(shallowRender(Header()));
    console.log(render(Header()));

But that's not really nice ;) I'm trying to use this way to shallow render components for unit tests while keeping the code style (<Header .... /> with params) similar to my "normal" code

[remko79]

After updating to v6 the fragments are now rendered as <d> when using shallow rendering instead of <p>

[marvinhagemeister]

Can confirm this issue. Can reproduce it on my end.