Testing styling in react testing library

Question

I have a component, it has 2 divs with different background colours based on the pageIndex. I want to test this component when the pageIndex = 0 and when it is pageIndex = 1. The test succeed in both cases also it has to fail in the second one. What am i missing here?

export function FormSteps(props: FormStepsProps) {
  return (
    <div>
      <div
        style={{
          backgroundColor:
            props.pageIndex === 0
              ? "green"
              : "red",
        }}
      >
        <span>Step 1</span>
      </div>
      <div
        style={{
          backgroundColor:
            props.pageIndex === 1
              ? "red"
              : "green",
        }}
      >
        <span>Step 2</span>
      </div>
    </div>
  );
}

test("Page Index is 0", () => {
  render(<FormSteps pageIndex={0} />);

  const fieldStep1 = screen.getByText(/step 1/i);
  const fieldStep2 = screen.getByText(/step 2/i);

  expect(fieldStep1).toHaveStyle(`backgroundColor: "green"`);
  expect(fieldStep2).toHaveStyle(`backgroundColor: "red"`);
});

test("Page Index is 1", () => {
  render(<FormSteps pageIndex={1} />);

  const fieldStep1 = screen.getByText(/step 1/i);
  const fieldStep2 = screen.getByText(/step 2/i);

  expect(fieldStep1).toHaveStyle(`backgroundColor: "green"`);
  expect(fieldStep2).toHaveStyle(`backgroundColor: "red"`);
});

You made two changes in the ternaries : pageIndex equality and reversed results — Hugo Mallet
– Hugo Mallet, Commented Jan 12, 2023 at 15:17

poPaTheGuru · Accepted Answer · 2023-01-12 15:19:44Z

1

Based on your code, if page index === 0, then the first div would be green as you tested and second div should have backgroundColor: "red", and for page index === 1 would be otherwise. Here is your correct code to pass your tests:

test("Page Index is 0", () => {
  render(<FormSteps pageIndex={0} />);

  const fieldStep1 = screen.getByText(/step 1/i);
  const fieldStep2 = screen.getByText(/step 2/i);

  expect(fieldStep1).toHaveStyle(`backgroundColor: "green"`);
  expect(fieldStep2).toHaveStyle(`backgroundColor: "green"`);
});

test("Page Index is 1", () => {
  render(<FormSteps pageIndex={1} />);

  const fieldStep1 = screen.getByText(/step 1/i);
  const fieldStep2 = screen.getByText(/step 2/i);

  expect(fieldStep1).toHaveStyle(`backgroundColor: "red"`);
  expect(fieldStep2).toHaveStyle(`backgroundColor: "red"`);
});

But if you want for your second test to fail, should be like this (this is what I understand from your question, that the second test should fail):

test("Page Index is 1", () => {
  render(<FormSteps pageIndex={1} />);

  const fieldStep1 = screen.getByText(/step 1/i);
  const fieldStep2 = screen.getByText(/step 2/i);

  expect(fieldStep1).toHaveStyle(`backgroundColor: "green"`);
  expect(fieldStep2).toHaveStyle(`backgroundColor: "green"`);
});

answered Jan 12, 2023 at 15:19

poPaTheGuru

1,1301 gold badge20 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ReactDeveloper Over a year ago

I tried it, it always succeed even if i give it color blue :(

poPaTheGuru Over a year ago

try to add the debug() command or look it in snapshot and see the style of the divs. Maybe this will give you an idea about how your divs are rendered and see exactly where is the problem

Collectives™ on Stack Overflow

Testing styling in react testing library

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related