Я пытаюсь протестировать в «интеграции» функцию вставки с помощью библиотеки прямого тестирования. До сих пор мне удавалось инициировать событие 'paste' и видеть, что событие вставки передается в свойство onPaste моего поля ввода.
То, что я хотел бы протестировать, является фактическим значение изменяемого элемента на то, что вставляется. Следует примеру:
import { TextField } from '@material-ui/core';
it('should show an empty cell if value is incorrect', async () => {
const { getByDisplayValue } = await render(
<TextField
value=""
onPaste={event => {
console.log(event.clipboardData.getData('text'));
}}
onChange={e => {
console.log(e.currentTarget.value);
}}
/>
);
const input = await getByDisplayValue('');
const eventProperties = {
clipboardData: {
getData: jest.fn().mockReturnValueOnce('Foo Bar Test'),
},
};
const pasteEvent = createEvent.paste(input, eventProperties);
pasteEvent.clipboardData = eventProperties.clipboardData;
fireEvent(input, pasteEvent);
await waitFor(() => {
getByDisplayValue('Foo Bar Test');
});
});
В результате я получаю:
console.log MyComponent.test.js:110
Foo Bar Test
TestingLibraryElementError: Unable to find an element with the display value: Foo Bar Test.
<body>
<div>
<div
class="MuiFormControl-root MuiTextField-root"
>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiInput-input"
type="text"
value=""
/>
</div>
</div>
</div>
</body>
Я ожидал бы, что опора value для TextField будет заполнена содержимым вставки событие, но, как видите, оно пустое. Кроме того, я ожидал, что сработает событие onChange, но это тоже не так (консольный журнал в тесте не отображается).