如何对返回 JSX.element 的函数进行单元测试？

Question

我有一个接受参数并返回JSX.Element的函数

//title.tsx
export const getTitle = (pageTitle: string) => {
    return <title> {pageTitle} </title>;
}

这就是我测试它的方式：

describe('Title component', () => {    
    test("Title component is rendered", () => {
        const wrapper = getTitle('abc');
        const expectedText = `abc`;
        const actualText = wrapper; //wrapper.text() does not exists;
        expect(actualText).toContain(expectedText);
    });
});

测试失败，输出如下：

Expected value: "abc"
Received object: <React.Fragment><title>abc</title></React.Fragment>

根据一些研究，我在 Google 上找到了一个解决方案，它假定函数是类组件的一部分。该解决方案要求wrapper 是returned by shallow while passing the class-based component ControlledForm)。这不适用于我的情况。

如何从函数返回的JSX.element中提取文本值与一些预期的文本进行比较？

或者有其他方法可以测试这种情况吗？

Answer 1

去找道具或使用另一个浅滩。我不知道哪个是红色药丸。

const titleName = "titleName";
const wrapper = shallow(getTitle(titleName));
const titleElement = wrapper.getElement("title");
titleElement.props.children[1] // "titleName" as [0] and [2] are " "
const containsTitle = titleElement.props.children.includes(titleName);
expect(containsTitle).toBe(true);

或

const titleName = "titleName";
const wrapper = shallow(getTitle(titleName));
const titleElement = wrapper.getElement("title");
const secondWrapper = shallow(titleElement);
secondWrapper.text() // "titleName"
const containsTitle = secondWrapper.contains(titleName);
expect(containsTitle).toBe(true);