使用 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