Jest.js 如何使用React测试库测试React Portal内部的模态？

ubbxdtey 于 2023-02-06 发布在 Jest

关注(0)|答案(2)|浏览(208)

我正在尝试使用React Testing Library测试我的Modal组件。Modal在React Portal内部呈现。现在，当我尝试将Modal与快照匹配时，快照呈现为空div。

test('The component should render in body when open', () => {
    const {container} = render(
        <Modal>
            <div>My dialog content</div>
        </Modal>
    );

    expect(container).toMatchSnapshot();
});

我得到的快照是这样的：

exports[`The component should render in body when open 1`] = `<div />`;

我见过一些变通方法，比如将{container: document.body}作为render()函数的第二个参数传递，但是没有一个真正起作用。
而且我不能通过container查询任何元素，它总是返回null。

const dialog = container.querySelector(".modal");
console.log(dialog); // null

jestjs

来源：https://stackoverflow.com/questions/73205954/how-can-i-test-a-modal-inside-of-a-react-portal-using-react-testing-library

2条答案

按热度按时间

eeq64g8w1#

首先，您应该标识门户的容器元素，即添加到主体中以保存门户内容的"根"节点。然后，您应该手动将其追加/添加到DOM中，以便您的呈现方法知道在何处呈现Modal组件。然后，您应该使用baseElement属性而不是容器。因为门户元素呈现在正文中，然后根据快照测试baseElement（实际的门户元素）的firstChild。
这对我很有效：

it('should render', () => {
  document.body.innerHTML = '<div id="my-root-element-id" />';
    
  const { baseElement } = render(<Default />);
    
  expect(baseElement.firstChild).toMatchSnapshot();
});

赞(0）回复(0）举报 2023-02-06

ugmeyewa2#

我最终通过快照baseElement而不是container使其工作。两者都是render()函数返回的属性。

test('The component should render in body when open', () => {
    const {baseElement} = render(
        <Modal>
            <div>My dialog content</div>
        </Modal>
    );

    expect(baseElement).toMatchSnapshot();
});

赞(0）回复(0）举报 2023-02-06

我来回答

Jest.js 如何使用React测试库测试React Portal内部的模态？

2条答案

相关问题

热门标签

最新问答