使用 react-testing-library 对样式化组件的直接子项进行单元测试时，“在通过的组件上找不到样式规则”

Question

这是我的组件的样式li ：

const Tab = styled.li`
  margin: 0px 60px;
  color: black;
  & > button {
    border: none;
    padding: 28px 0px;
    font-weight: 600px;
  }
`;

这是失败的单元测试：

const tabItems = [
  {
    label: 'Test 1',
    id: 'tab1',
  },
  {
    label: 'Test 2',
    id: 'tab2',
  },
];
describe('Tabs styling tests', () => {
  afterEach(cleanup);

  it('should have font-weight 600', async () => {
    const { getByText } = render(<Tabs tabItems={tabItems} selected="test1" />);

    expect(getByText('Test 1')).toHaveStyleRule('font-weight', '600');
  });
});

对于我尝试测试该按钮的任何 css 样式，我No style rules found on passed Component 。

测试通过的任何.parentElement样式测试。
例如。 expect(getByText('Test 1').parentElement).toHaveStyleRule('color', 'black'); 工作得很好。

如何测试样式组件的直接子级？

Answer 1

最后想出了如何让它工作：

it('should have font-weight 600', async () => {
  const { getByText } = render(<Tabs tabItems={tabItems} selected="test1" />);

  expect(getByText('Test 1').parentElement).toHaveStyleRule(
    'font-weight', 
    '600',
    { modifier: css`> button` }
  );
});

来源： https://github.com/styled-components/jest-styled-components/blob/master/README.md#tohavestylerule