@emotion/jest - react test library with emotion

It’s my first time to use emotion and I am a bit confused about what would be the best way to test with emotion and @testing-library/react.

When I check the snapshot, it doesn’t contain any style information and feels like this is not the correct way to do it.

exports[`Brands has default styles 1`] = `
<div>
  <div
    class="css-1anixd5-Brands eciq85e2"
  />
</div>
`;

it('has default styles', () => {
    const { container } = renderWithTheme(<Container />)
    expect(container).toMatchSnapshot()
  })
})

what am I missing here? Any helps would be appreciated! thanks

[sustainjane98]

Is there any way to test an Element which defines Styling for all its direct children? I tried this in an jest@25.5.4 @testing-library/react@11.2.5 and @emotion/jest@11.1.0

/* FlexContainer.tsx */

<div
  css={css`
    & {
      margin: 8px;
    }
    & > * {
      margin: 8px;
    }
  `}
>
  {children}
</div>;

So I wrote an unit test:

/* flexContainer.spec.tsx */

expect.extend(matchers);
test("Test JustifyContent Prop", () => {
  render(
    <FlexContainer>
      <div data-testid="child" />
    </FlexContainer>,
  );
  const flexItem = screen.getByTestId(
    "child",
  );

  expect(flexItem).toHaveStyleRule(
    "margin",
    "calc(0px / 2) calc(8px / 2)",
  );
  /*Returned: No such Style Element "margin"*/
});

But somehow the @emotion/jest@11.1.0 wasn’t able to resolve styles provided by the Parent. So is there a solution to achieve this?

[sustainjane98]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can’t afford the time to set up the repro, even if exact steps are given.

Sure I will add an Codesandbox tomorrow, Issue is that there is not yet full support for nextjs 😬 if this not work I provide an Github Repo then.