리액트 테스트 라이브러리에서 체크박스를 켜려면 어떻게 해야 하나요?

리액트 테스트 라이브러리에서 체크박스를 켜려면 어떻게 해야 하나요?

달성하려고 하는 이 매우 간단한 것에 대한 문서를 많이 찾을 수 없는 것 같습니다.

드롭다운이 있습니다.display: none체크박스를 클릭하면display: block제가 말하고자 하는 것은 체크박스를 클릭하면

 expect(getByLabelText('Locale')).toHaveStyle(`
  display: none;
`)

getByLabelText('Locale').checked = true

expect(getByLabelText('Locale')).toHaveStyle(`
  display: block;
`)

코드는 예상대로 동작하지만 테스트는 두 번째 예상 블록에서 실패하고 있습니다.display: none

이것을 주장하는 올바른 방법인가?

체크박스를 클릭하면 오브젝트의 2가지 속성이 갱신되어true그게 바로 코드로 표현되는 방식이죠이러한 Atribut을 수동으로 통과해도 테스트는 실패하지만 첫 번째 예상에서는 실패합니다.

뭔가 해야 될 것 같아서setProps

나는 지금 사용하려고 시도했다.renderWithRedux내 액션 크리에이터를 제대로 해고하지 않는 것 같아?

이fireEvent.click(queryByTestId('LocaleCheckbox'))체크박스를 업데이트 할 때 가장 좋은 방법은 무엇입니까?

다음을 사용하여 체크박스를 켜거나 끄려면react-testing-library, 단순하게 하고 싶은 것은fireEvent.click체크박스를 켜겠습니다.이에 대해 리액트 테스트 라이브러리 이슈 175에 대한 논의가 있었다.특히 kentcdods는 다음과 같이 말했다.

이는 더 잘 문서화되어야 하지만 실제로 변경 이벤트를 발생시키지 않는 체크박스를 사용하면 클릭 이벤트를 발생시켜야 합니다.

그런데 위에서 작성한 코드에 따르면 라벨 텍스트가 '로케일'인 노드는 무엇입니까?왜냐하면 그게 스타일이면display: none사용자가 체크하려면 어떻게 클릭합니까?오타인가요?드롭다운에서 스타일을 강조하지만 체크박스를 클릭해야 합니다.내가 잘못 알고 있는 건지도 모르지만, 네 코드로 보면 네 주장과 연산을 모두 같은 노드에서 하고 있는 것 같아.그건 아닌 것 같아.

CodeSandbox 샘플을 작성했는데, 그 샘플은div하기 위한 스타일로display: none또는display:block체크박스가 켜져 있는지 여부에 따라 달라집니다.사용하다react-hooks국가 유지에 힘쓰고 있어요.

또,react-testing-library스타일에 대한 어설션, 체크박스의 체크박스의 체크박스의 체크박스의 체크박스를 켜고 변경된 스타일을 어설션하는 것을 나타내는 테스트입니다.

테스트 코드는 다음과 같습니다.

it('changes style of div as checkbox is checked/unchecked', () => {
  const { getByTestId } = render(<MyCheckbox />)
  const checkbox = getByTestId(CHECKBOX_ID)
  const div = getByTestId(DIV_ID)
  expect(checkbox.checked).toEqual(false)
  expect(div.style['display']).toEqual('none')
  fireEvent.click(checkbox)
  expect(checkbox.checked).toEqual(true)
  expect(div.style['display']).toEqual('block')
  fireEvent.click(checkbox)
  expect(checkbox.checked).toEqual(false)
  expect(div.style['display']).toEqual('none')
})

이것이 당신을 올바른 방향으로 인도하는 데 도움이 되기를 바랍니다.

사용하고 있다 "react-test-renderer": "^17.0.2"심플한 방법으로 같은 작업을 할 수 있었습니다.

getByTestId("data-testid").click()

이 코드를 사용하여getByTestId:

const {getByTestId} = render(<Checkbox
        onClose={jest.fn()}
        onSave={onSave}
    />)

userEvent 및 jest-dom 라이브러리를 사용하는 것이 더 나은 방법입니다.

import React from "react";
import userEvent from "@testing-library/user-event";
import { act, render, screen } from "@testing-library/react";
    
it("changes style of div as checkbox is checked/unchecked", async () => {
  render(<MyCheckbox />);
  const checkboxLabel = screen.getByText(/checkbox/i, { selector: "label" });

  expect(screen.queryByRole("checkbox")).not.toBeChecked();
  expect(checkboxLabel).toHaveStyle("display: none");

  await act(async () => {
    await userEvent.click(screen.getByRole("checkbox"));
  });

  expect(screen.getByRole("checkbox")).toBeChecked();
  expect(checkboxLabel).toHaveStyle("display: block");
});

@samehanwar님, 명확한 답변 감사합니다.덧붙이고 싶은 게 있어요.

실제로 act()를 사용할 필요는 없습니다.이 작업을 수행할 필요가 없는 이유는 userEvent, render는 이미 실행 중이기 때문입니다.testing-library/dom의 eventWrapper()는 이벤트가 userEvent와 같이 기능할 때 호출됩니다.

답은 다음과 같습니다.

import React from "react";
import userEvent from "@testing-library/user-event";
import { render, screen } from "@testing-library/react";
    
it("changes style of div as checkbox is checked/unchecked", async () => {
  render(<MyCheckbox />);
  const checkboxLabel = screen.getByText(/checkbox/i, { selector: "label" });

  expect(screen.queryByRole("checkbox")).not.toBeChecked();
  expect(checkboxLabel).toHaveStyle("display: none");

  await userEvent.click(screen.getByRole("checkbox"));

  expect(screen.getByRole("checkbox")).toBeChecked();
  expect(checkboxLabel).toHaveStyle("display: block");
});

언급URL : https://stackoverflow.com/questions/55177928/how-do-you-check-a-checkbox-in-react-testing-library