javascript - How to unit test a function that return JSX.element? - Stack Overflow

admin管理员组

文章数量:1400783

I have a function that accepts a parameter and returns a JSX.Element

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

This is how I'm testing it:

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

The test fails with the following output:

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

As per some research, I found a solution on Google, which assumes that the function is part of a class ponent. The solution requires wrapper to be an returned by shallow while passing the class-based ponent ControlledForm). This does not apply to my case.

How to extract the text value out of JSX.element returned by the function to pare with some expected text?

Or is there another way to test such cases?

I have a function that accepts a parameter and returns a JSX.Element

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

This is how I'm testing it:

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

The test fails with the following output:

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

As per some research, I found a solution on Google, which assumes that the function is part of a class ponent. The solution requires wrapper to be an returned by shallow while passing the class-based ponent ControlledForm). This does not apply to my case.

How to extract the text value out of JSX.element returned by the function to pare with some expected text?

Or is there another way to test such cases?

• javascript
• reactjs
• typescript
• unit-testing
• tdd

Share Improve this question Follow edited Jun 9, 2020 at 17:46 Mr.X asked Jun 9, 2020 at 16:34 Mr.XMr.X 31.4k2727 gold badges147147 silver badges229229 bronze badges 2

• 1 I started writing up an answer for you but realize it doesn't address your core issue to write a correct test. I'll work on that part. In the meantime, let's get some terminology straight: getTitle() is a function that returns JSX, but it is not a functional ponent. A functional ponent must take a single JavaScript object as its only parameter. Traditionally we call this parameter props. The main difference is that you cannot use <getTitle> as a JSX tag like you could if you wrote it correctly as a functional ponent. Instead, you have to call getTitle() directly. – Code-Apprentice Commented Jun 9, 2020 at 16:48
• @Code-Apprentice Thanks for the correction! – Mr.X Commented Jun 9, 2020 at 17:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Go for the props or use another shallow. I don't know which one is the red pill.

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);

or

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);

Wanted to provide an alternative answer for anyone using Testing Library:

// This code snippet won't run, but will work in a project

import React from "react";
import { render } from "@testing-library/react";

describe('Title ponent', () => {    
    test("Title ponent is rendered", () => {
        const actualText = "abc"
        const {getByText} = render(<>{getTitle(actualText)}</>);
        expect(getByText(actualText, {selector: "title"})).toBeInTheDocument();
    });
});

Depending on what you're testing, you could also use, e.g., getByRole, and then assert on the content / textContent of the returned portion of the rendered DOM. And there are certainly other strategies that could work.

本文标签： javascriptHow to unit test a function that return JSXelementStack Overflow