render
로 만든 container는 매 test
(=it
)가 끝나면 (global)cleanup
이 호출되서 없어짐.beforeAll
로 직접 rerender
호출 (꼭 beforeAll 안에해야됨)const { container, rerender } = render(<AppListBar />);
describe('wrapper 1', () => {
// ...
});
describe('wrapper 2', () => {
beforeAll(() => {
rerender(<MainScreen />);
});
test('aaa', () => {
expect(true).toBeTruthy();
});
});
rerender를 하면 완전히 재생성하지 않음. (정확한 범위는 모르겠음)
그 근거는 아래와 같은 값들이 이전에 세팅된 값들을 유지함
완전히 재 생성하고 싶으면 아래와 같이 각 describe의 beforeAll에서 render를 새롭게 호출 후 반환되는 container를 사용한다.
describe('Change layout', () => {
let container: HTMLElement;
let unmount: () => void;
beforeAll(() => {
[container, unmount] = renderCustom('default', 'landscape');
});
afterAll(() => {
unmount();
});
test('Change by symbol', async () => {
fireEvent.click(container.querySelector('.hg-button-symbol')!);
await within(container).findByText('!');
expect(container).toMatchSnapshot();
});
});
within(container)
를 사용함