Attaching data attributes doesn't work in test

As explained here, I’m trying to attach a data attribute to a styled component, but it doesn’t work.

const Progress = styled(CircularProgress).attrs({
  'data-testid': 'progress'
})`
  display: inline-flex;
  vertical-align: middle;
`;

it('shows a circular progress when passing the loading prop', async () => {
  const { getByTestId } = customRender(<SubmitButton loading>Test</SubmitButton>);
  const progress = await waitForElement(() => getByTestId('progress'));
  expect(progress).toBeInTheDocument();
});

Passes the test: <div data-testid="progress"><Progress color={color} /></div> Doesn’t pass the test (cannot find the data attribute): <Progress color={color} />

It doesn’t work either if I pass the attribute inline: <Progress color={color} data-testid="progress" />

Tested with Styled Components v4.0.3

[probablyup]

Feel free to ask further questions on stack overflow or our spectrum community, Github Issues should just be for bug reports and feature requests. Thanks.

[probablyup]

@gazpachu you aren’t spreading the props in your Comp component.

const Comp = props => <div {...props}>Hello</div>;