Я пытаюсь протестировать свой компонент формы входа в ReactJS, используя Jest и Enzyme. Я использую Formik для обработки формы. Я хочу проверить, появляется ли компонент ошибки с компонентом Input
, если значение поля input
пусто и нажата кнопка Login
. Ниже приведен код, который я выполнил в тесте:
it("Should give error on email and password when login clicked", async () => {
const store = getOrCreateStore();
const wrap = mount(
<Provider store={store}>
<LoginPage />
</Provider>
);
const form = wrap.find(".auth-board").find("form");
const formBody = form.find(".form-body");
const emailField = formBody.find(".form-group").at(0);
const emailError = emailField.find(".error-validate");
const passwordField = formBody.find(".form-group").at(1);
const passwordError = passwordField.find("div").find(".error-validate");
expect(emailError.length).toBe(0);
expect(passwordError.length).toBe(0);
form.simulate("submit");
await setTimeout(async () => {
wrap.update();
await wrap.instance().forceUpdate();
const wrapAfter = wrap.update();
const formAfter = wrapAfter.find(".auth-board").find("form");
const formBodyAfter = formAfter.find(".form-body");
const emailFieldAfter = formBodyAfter.find(".form-group").at(0);
const emailErrorAfter = emailFieldAfter.find(".error-validate");
const passwordFieldAfter = formBodyAfter.find(".form-group").at(1);
const passwordErrorAfter = passwordFieldAfter.find("div").find(".error-validate");
expect(emailErrorAfter.length).toBe(1);
expect(passwordErrorAfter.length).toBe(1);
wrap.unmount();
wrapAfter.unmount();
}, 0);
});
Когда я запускаю тест, я получаю исключение:
(node:19268) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'URL' of null
at new XMLHttpRequest (/home/fawad-khalil/Documents/project/lunchon-web/node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:112:42)
at dispatchXhrRequest (/home/fawad-khalil/Documents/project/lunchon-web/node_modules/axios/lib/adapters/xhr.js:19:19)
at new Promise (<anonymous>)
at xhrAdapter (/home/fawad-khalil/Documents/project/lunchon-web/node_modules/axios/lib/adapters/xhr.js:11:10)
at dispatchRequest (/home/fawad-khalil/Documents/project/lunchon-web/node_modules/axios/lib/core/dispatchRequest.js:59:10)
at process._tickCallback (internal/process/next_tick.js:68:7)
(node:19268) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 4)
(node:19268) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
После небольшой игры с тестомкод, я пришел к выводу, что исключение происходит из-за оператора form.simulate("submit");
, и оно не происходит, если этого оператора нет. Теперь, если событие submit имитируется, возникает исключение, и последние 2 expect
операторы не выполняются, и сообщается, что тест пройден в консоли. Кто-нибудь знает, как справиться с этим поведением?