reactjs - 无法使用@testing-library/user-event 使用新值更新文本区域

Question

我需要使用@testing-library/react 测试 graphql-react 组件。我想根据查询的结果值显示文本区域。 [我能够得到那个]。但是，无法使用@testing-library/user-event 使用新值更新文本区域。

这是 graphql-react 组件:

CustomWelcomeMessageContainer.jsx

import React from 'react';
import PropTypes from 'prop-types';
import {Query} from 'react-apollo';
import FormControl from "react-bootstrap/lib/FormControl";
import {FormSection, FormSectionItem} from "../../src/modules/Forms/components/FormSection/FormSection";
import get from "lodash/get";
import customWelcomeMessageQuery from "../../modules/Forms/queries/allowWelcomeMessageQuery";

const CustomWelcomeMessageContainer = ({isStudentBuddy, universitySlug, prospectWelcomeMessage, onProspectMessageChange}) => {
    return (<Query
                query={customWelcomeMessageQuery}
                variables={{
                    universitySlug,
                }}
    >
                {({loading, data}) => {
                    let allowWelcomeMessageCustomization;
                    if (isStudentBuddy) {
                        allowWelcomeMessageCustomization = get(
                            data,
                            "university.allowWelcomeMessageCustomization",
                        );
                    } else {
                        allowWelcomeMessageCustomization = get(
                            data,
                            "university.allowWelcomeMessageCustomizationStaff",
                        );
                    }
                    if (
                        !loading &&
                        allowWelcomeMessageCustomization
                    ) {
                        return (
        <FormSection header="Custom Welcome Message">
            <FormSectionItem>
                <FormControl
                    componentClass="textarea"
                    typeClass="text"
                    value={prospectWelcomeMessage}
                    placeholder="Enter text"
                    onChange={onProspectMessageChange}
                    required
                    rows={5}
                />
            </FormSectionItem>
        </FormSection>
    );
                    }

                    return null;
                }}
            </Query>
    );
};

CustomWelcomeMessageContainer.propTypes = {
    isStudentBuddy: PropTypes.bool,
    universitySlug: PropTypes.string.isRequired,
    prospectWelcomeMessage: PropTypes.string.isRequired,
    onProspectMessageChange: PropTypes.func.isRequired,
};


CustomWelcomeMessageContainer.defaultProps = {
    isStudentBuddy: false,
    userDetails: {},
};

export default CustomWelcomeMessageContainer;

这是测试文件:

CustomWelcomeMessageContainer.test.jsx

import React from 'react';
import {render, screen} from '@testing-library/react';
import wait from 'waait';
import '@testing-library/jest-dom';
import userEvent from "@testing-library/user-event";
import {MockedProvider} from '@apollo/react-testing';
import CustomWelcomeMessageContainer from './CustomWelcomeMessageContainer';

const mocks = [{
    request: {
        query: customWelcomeMessageQuery,
        variables: {
            universitySlug: "staffTest1",
        },
    },
    result: {
        data: {
            university: {
                id: "staffTest1",
                allowWelcomeMessageCustomization: false,
                allowWelcomeMessageCustomizationStaff: true,
            },
        },
    },
},
];

describe('CustomWelcomeMessageContainer', async() => {
test("type", async () => {
        render(<textarea
            className="form-control"
            placeholder="Enter text"
            required=""
            rows="5"
            typeClass="text"
        >Hello world </textarea>);
        const val = await screen.findByRole("textbox");
        userEvent.clear(val);
  await userEvent.type(val, "hi");
  expect(val).toHaveValue("hi");
});

test('should display the value entered by the ambassador', async() => {
        render(
            <MockedProvider
                mocks={mocks}
                addTypename={false}
            >
                <CustomWelcomeMessageContainer
                    isStudentBuddy
                    universitySlug="studentTest1"
                    prospectWelcomeMessage="default"
                    onProspectMessageChange={jest.fn()}
                />
            </MockedProvider>,
        );
        await wait(0);
        const customWelcomeMessageTextBox = await screen.findByRole("textbox");
        userEvent.clear(customWelcomeMessageTextBox);
        await userEvent.type(customWelcomeMessageTextBox, "hi");
        expect(customWelcomeMessageTextBox).toHaveValue("hi");
    });
});

在第一个测试中，渲染了一个基本的文本区域并且文本更新成功[这意味着用户事件的使用没有问题]。

而在第二个测试中，渲染了 graphql-react 组件并且文本更新失败。是因为文本区域最初是从 Prop 中填充的吗？无法理解为什么更新不起作用。这是我得到的错误:

Error: expect(element).toHaveValue(hi)

Expected the element to have value:
  hi
Received:
  default

Answer 1

试试这个。

const inputTextArea = getByRole("textbox");
expect(inputTextArea.value).toEqual("hi");