snapshots failing due to style prop differences

[kentcdodds]

Hi 👋

So these snapshots pass locally and in CI, but not in codesandbox. https://codesandbox.io/s/249l243k5j

All the differences are in the style prop:

-       style="display: flex;"
+       style="display: flex; justify-content: space-around; align-items: center;"

I'm not sure why though... Seems like a bug.

[CompuIves]

Heh that's indeed very weird... Also interesting to see that so many styles are different. Seems like justify-content: space-around; align-items: center; is constantly added for flex items for some reason... Maybe because it's ran for a second time in the same context?

I'll do some debugging on this!

[kentcdodds]

In the meantime I removed the use of the style prop in those components to side-step the issue :)

[lbogdan]

@kentcdodds @CompuIves
Seems like there's an issue with the snapshots? For example, for test no. 12, the snapshot is

exports[`renders a toggle component 1`] = `
<div>
  <div>
    <div
      style="display: flex;"
    >
      <nav>
        <ul
          style="display: flex; list-style: none; padding-left: 0px;"
        >
          <li>
            <a
              href="index.html"
            >
              Home
            </a>
          </li>
[...]

but if I run it locally, go to /12/final and take a look at the html it's actually

<div>
  <div>
    <div>
      <div style="display: flex; justify-content: space-around; align-items: center;">
        <nav style="flex: 1 1 0%;">
          <ul style="display: flex; justify-content: space-around; list-style: none; padding-left: 0px;">
            <li>
              <a href="index.html">Home</a>
            </li>
[...]

Although, weirdly enough, running tests locally works. So it really looks like jest's snapshot renderer (or whoever's responsible for that) is stripping CSS attributes related to flexbox.

[github-actions]

This issue is stale because it has been open many days with no activity. It will be closed soon unless the stale label is removed or a comment is made.

[github-actions]

This issue has been automatically closed because there wasn't any activity after the previous notice or the stale label wasn't removed.