Is there a way in jest to check for a div by classname and then check the style?

user_5013948 0
Viewed 51

I'm running into some issues with a test I'm trying to create.

This is what my test currently looks like:

it('Test Cancel on Modal', async () => {    
act(() => {
  render(
    <MyPage />      
  );
});

const btnAdd = screen.getAllByTestId('AddNewWidget')[0];

await act(async () => {
  fireEvent.click(btnAdd);
});

//screen.debug(undefined, 300000);

const btnCancel = screen.getAllByTestId('btnCancel')[0];

await act(async () => {
  fireEvent.click(btnCancel);
});

//screen.debug(undefined, 300000);


jest.resetAllMocks();
});

When I review the output of the screen.debug, I'm seeing the following:

  <div
    class="MuiModal-root MuiDialog-root css-v61v4w-MuiModal-root-MuiDialog-root"
    role="presentation"
  >
    <div
      aria-hidden="true"
      class="MuiBackdrop-root css-1am3qag-MuiBackdrop-root-MuiDialog-backdrop"
      style="opacity: 0; webkit-transition: opacity 195ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 195ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
    />

I'm trying to see what the opacity is on a div with the classname of ""MuiBackdrop-root css-1am3qag-MuiBackdrop-root-MuiDialog-backdrop"

Unfortunately, I'm not seeing a way on how to do this.

Could someone please give me some pointers?

ts-jest jestjs reactjs
1 Answers

Not sure how to do it by className but below example is using data-testid


export function Temp() {
  return (
    <div>
      <h1 data-testid="inline-style" style={{ color: "red" }}>
        Hello world
      </h1>
    </div>
  );
}

test("should have color red", () => {
  render(<Temp />);
  const h1Element: HTMLInputElement = screen.getByTestId("inline-style");
  expect(h1Element).toHaveStyle({
    color: "red",
  });
});
user_59960310
Related