테스트 시 리액트 상태 갱신의 원인이 되는 코드를 행동으로 정리해야 합니다.
다음 테스트가 있습니다.
import {
render,
cleanup,
waitForElement
} from '@testing-library/react'
const TestApp = () => {
const { loading, data, error } = useFetch<Person>('https://example.com', { onMount: true });
return (
<>
{loading && <div data-testid="loading">loading...</div>}
{error && <div data-testid="error">{error.message}</div>}
{data &&
<div>
<div data-testid="person-name">{data.name}</div>
<div data-testid="person-age">{data.age}</div>
</div>
}
</>
);
};
describe("useFetch", () => {
const renderComponent = () => render(<TestApp/>);
it('should be initially loading', () => {
const { getByTestId } = renderComponent();
expect(getByTestId('loading')).toBeDefined();
})
});
테스트는 성공했지만 다음 경고가 표시됩니다.
경고:테스트 내의 TestApp 업데이트는 액트(...)로 포장되지 않았습니다.
When testing, code that causes React state updates should be wrapped into act(...): act(() => { /* fire events that update state */ }); /* assert on the output */ This ensures that you're testing the behavior the user would see in the browser in TestApp
console.error node_modules/react-dom/cjs/react-dom.development.js:506 경고:테스트 내의 TestApp 업데이트는 액트(...)로 포장되지 않았습니다.
When testing, code that causes React state updates should be wrapped into act(...): act(() => { /* fire events that update state */ }); /* assert on the output */ This ensures that you're testing the behavior the user would see in the browser in TestApp
열쇠는 하는 것이다await
act
그런 다음 사용async
화살표 기능
await act( async () => render(<TestApp/>));
출처:
https://stackoverflow.com/a/59839513/3850405
'wait wait For()' 내에서 어설션을 시도합니다.이것에 대해서는, it() 함수가 비동기일 필요가 있습니다.
it('should be initially loading', async () => {
const { getByTestId } = renderComponent();
await waitFor(() => {
expect(getByTestId('loading')).toBeDefined();
});
});
침착하고 행복한 코딩
getBy* 또는 queryBy*가 아닌 비동기 쿼리(findBy*)를 사용하여 해결된 동일한 문제가 발생하고 있습니다.
expect(await screen.findByText(/textonscreen/i)).toBeInTheDocument();
비동기 쿼리는 요소 대신 Promise를 반환합니다.이 경우 지정된 쿼리와 일치하는 요소가 발견되면 해결됩니다.요소를 찾을 수 없거나 기본 타임아웃 1000ms 후에 여러 요소가 발견되면 약속은 거부됩니다.여러 요소를 찾아야 할 경우 findAllBy를 사용합니다.
https://testing-library.com/docs/dom-testing-library/api-async/
하지만 아시다시피 화면에 표시되지 않으면 제대로 작동하지 않습니다.그러니까queryBy*
그에 따라 테스트 케이스를 업데이트해야 할 수도 있습니다.
[주의: 사용자 이벤트는 없습니다.단순한 렌더링만 하면 find By가 동작합니다.그렇지 않으면 사용자 이벤트를 활성화해야 합니다]
wait inside act를 사용해 보세요.
import { act } from 'react-dom/test-utils';
await act(async () => {
wrapper = mount(Commponent);
wrapper.find('button').simulate('click');
});
test('handles server ok', async () => {
render(
<MemoryRouter>
<Login />
</MemoryRouter>
)
await waitFor(() => fireEvent.click(screen.getByRole('register')))
let domInfo
await waitFor(() => (domInfo = screen.getByRole('infoOk')))
// expect(domInfo).toHaveTextContent('登陆成功')
})
난 이런 식으로 문제를 풀었으니 너도 한번 해봐
액트 에러의 스택은 보이지 않지만, 로딩이 종료되었을 때 TestApp 상태가 변경되어 테스트 종료 후에 다시 렌더링되는 것이 원인이라고 생각합니다.따라서 테스트가 끝날 때까지 로딩이 사라지기를 기다리는 것이 이 문제를 해결할 수 있을 것입니다.
describe("useFetch", () => {
const renderComponent = () => render(<TestApp/>);
it('should be initially loading', async () => {
const { getByTestId } = renderComponent();
expect(getByTestId('loading')).toBeDefined();
await waitForElementToBeRemoved(() => queryByTestId('loading'));
});
});
리액트 테스트 라이브러리로 리액트 앱:
여러 가지 시도를 해봤는데, 제게 효과가 있었던 것은 시험이 끝난 후 아무 일도 일어나지 않도록 화재 발생 후 무언가를 기다리는 것이었습니다.
제 경우 입력 필드가 집중되면 열리는 달력입니다.포커스 이벤트를 실행하고 결과 포커스 이벤트가 발생했는지 확인하고 테스트를 마쳤습니다.아마도 제 테스트가 끝난 후 시스템이 끝나기 전에 캘린더가 열려서 경고가 발생한 것 같습니다.끝나기 전에 달력이 나타나기를 기다린 것이 효과가 있었다.
fireEvent.focus(inputElement);
await waitFor(async () => {
expect(await screen.findByText('December 2022')).not.toBeNull();
});
expect(onFocusJestFunction).toHaveBeenCalledTimes(1);
// End
이게 도움이 됐으면 좋겠는데, 반나절이나 이 일에 소비했어.
은 단지 에 있는 이다.react-testing-library (RTL)
됩니다.act
RTL은 이미 백그라운드에서 사용되고 있기 때문에 RTL에서 사용할 수 있습니다.「 」를하고 있지 않은 경우RTL
, 을.act
import {act} from "react-dom/test-utils"
test('',{
act(()=>{
render(<TestApp/>)
})
})
구성 요소가 데이터 가져오기를 수행할 때 이 경고가 표시됩니다.에 내부 act()
및 가 먼저 , 다시 업데이트해야 합니다.act()
자,그러면요소를최신상태는 .
이 함수 RTL을 실행하는 입니다.findBy*
test("test", async () => {
render(
<MemoryRouter>
<TestApp />
</MemoryRouter>
);
await screen.findByRole("button");
});
언급URL : https://stackoverflow.com/questions/56722139/when-testing-code-that-causes-react-state-updates-should-be-wrapped-into-act
'sourcetip' 카테고리의 다른 글
Angular 통합 방법UI에서 AngularJS로? (0) | 2023.02.17 |
---|---|
클라이언트에 Firebase에서 원하는 데이터에 액세스할 수 있는 권한이 없습니다. (0) | 2023.02.17 |
ngIf 및 ngSwitch 각도JS (0) | 2023.02.13 |
TypeScript에서 컴포넌트 유형 반응 (0) | 2023.02.13 |
ngClass 스타일(대시 입력 키 포함) (0) | 2023.02.13 |