7.0.8 Fails to generate class names for components using dot notation

[pjaws]

We got a PR from Dependabot to upgrade jest-styled-components from 7.0.5 to 7.0.8, and our snapshot tests are failing where we are using components with dot notation, due to missing classes.

Here is the component in question:

import styled from 'styled-components';
import { space, typography } from 'styled-system';
import css from '@styled-system/css';

const Table = styled.table(
  css({
    width: '100%',
    borderRadius: 'default',
    borderSpacing: 0,
    px: 2,
    pb: 2,
    bg: 'blue100',
    fontFamily: 'body',
    color: 'text',
    '& b': {
      fontWeight: 700,
      color: 'blue',
    },
    '& highlight': {
      fontWeight: 700,
      color: 'teal40',
    },
  }),
  space
);

Table.Head = styled.thead(css({}));

Table.Heading = styled.th(
  css({
    p: 3,
    fontWeight: 400,
    textAlign: 'left',
  }),
  typography
);

Table.HeadRow = styled.tr(css({}));

Table.Body = styled.tbody(css({}));

Table.BodyRow = styled.tr(
  css({
    '&:nth-of-type(odd)': {
      bg: 'white',
      '& td:first-child': {
        borderTopLeftRadius: 'default',
        borderBottomLeftRadius: 'default',
      },
      '& td:last-child': {
        borderTopRightRadius: 'default',
        borderBottomRightRadius: 'default',
      },
    },
  })
);

Table.Cell = styled.td(
  css({
    py: 2,
    px: 3,
  })
);

export default Table;

And an example of a failed test:

 FAIL  src/__tests__/components/planCostCalculator.spec.js
  ● <PlanCostCalculator /> › matches the snapshot

    expect(received).toMatchSnapshot()

    Snapshot name: `<PlanCostCalculator /> matches the snapshot 1`

    - Snapshot  - 5
    + Received  + 5

    @@ -1200,14 +1200,14 @@
              >
                <table
                  class="c29 c30"
                >
                  <thead
    -               class="table__Head-sc-1pvnqyw-1"
    +               class=""
                  >
                    <tr
    -                 class="table__HeadRow-sc-1pvnqyw-3"
    +                 class=""
                    >
                      <th
                        class="c31 c32 c33"
                      />
                      <th
    @@ -1252,11 +1252,11 @@
                        </div>
                      </th>
                    </tr>
                  </thead>
                  <tbody
    -               class="table__Body-sc-1pvnqyw-4"
    +               class=""
                  >
                    <tr
                      class="c39"
                    >
                      <td
    @@ -1451,11 +1451,11 @@
                        $0.00
                      </td>
                    </tr>
                  </tbody>
                  <tbody
    -               class="table__Body-sc-1pvnqyw-4"
    +               class=""
                  >
                    <tr
                      class="c39"
                    >
                      <td
    @@ -1758,11 +1758,11 @@
                        -$218.00
                      </td>
                    </tr>
                  </tbody>
                  <tbody
    -               class="table__Body-sc-1pvnqyw-4"
    +               class=""
                  >
                    <tr
                      class="c50"
                    >
                      <td

      71 |     const { container } = renderWithRedux(<PlanCostCalculator />, mockState);
      72 |
    > 73 |     expect(container).toMatchSnapshot();
         |                       ^
      74 |   });
      75 |
      76 |   it('correctly calculates the results', () => {

      at Object.<anonymous> (src/__tests__/components/planCostCalculator.spec.js:73:23)

It does however generate classes if the dot notation component is further extended, i.e. const TableHeading = styled(Table.heading)(...).

Let me know if I can provide any more information to help!