jest-styled-components

jest-styled-components copied to clipboard

I don't know if this is a bug, or if I just can't find the answer on google.

I'm trying to see if a style rule is applied to the nth-child() of an element. I'm always getting the base style rather than the modified style which is based on the element's location in the tree.

This is my test:

  it('should render correctly', () => {
    const wrapper = render(<Rating rating={3} />);
    expect(toJson(wrapper.find('button:nth-child(1) svg'))).toHaveStyleRule('fill', '#91c11e');
    expect(toJson(wrapper.find('button:nth-child(1) svg'))).toMatchSnapshot();
  });

The test fails with:

    "Value mismatch for property 'fill'"

    Expected
      "fill: #91c11e"
    Received:
      "fill: #eceae6"

The snapshot is:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Rating should render correctly 1`] = `
.c0 {
  width: 16px;
  height: 16px;
  fill: #eceae6;
  pointer-events: none;
}

.c1:nth-child(-n + 3) .c0 {
  fill: #91c11e;
}

<svg
  class="c0"
  xmlns="http://www.w3.org/2000/svg"
>
  <use
    href="#star"
  />
</svg>
`;

Any help would be appreciated