我需要使用 @testing-library/react 测试一个 graphql-react 组件。我想根据查询的结果值显示文本区域。[我能够得到那个]。但是，无法使用@testing库/用户事件使用新值更新文本区域。
这是 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 组件并且文本更新失败。是因为文本区域最初是从道具填充的吗？无法理解为什么更新不起作用。这是我得到的错误：
Error: expect(element).toHaveValue(hi)
Expected the element to have value:
hi
Received:
default
试试，这个。
const inputTextArea = getByRole("textbox");
expect(inputTextArea.value).toEqual("hi");