jessepollak / jessepollak/payment

Payment don't work with jest

Open
#157 5 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
CoffeeScript
Stars
584
Forks
158
PR merge metrics
No merged PRs in 30d

Description

So I have a React application and I wanted to test the formatting of my input, and I couldn't test it properly, because `payment` uses `qt`, and `qt` uses the [`which` property of the KeyboardEvent which is deprecated (the recommendation being that we should use the `key` event instead)](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent). And apperently jest, who (to my knowledge) uses `js-dom` to render the components in the document, doesn't seem to be creating the `which` property in the KeyboardEvent.

I first thought about opening this issue on js-dom, but since this is a deprecated property I just figured they had moved on from using it and it won't come back to it. Then I thought about opening this issue on `qt`, but as the readme says this is a dependency used primarily by this library, and my problem being with this library, I decided to open it here instead.

Of course, that is only the case if this is really the problem, in my tests we receive every time from the `which` property on the `KeyboardEvent` a value of `0`.

To make the test I'm using:

```jsonc
// I've ommitted dependencies that I don't think make a difference
{
"dependencies": {
"payment": "^2.4.3",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"@testing-library/dom": "^7.30.4",
"@testing-library/jest-dom": "^5.11.10",
"@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^13.1.8",
"jest": "^26.6.3"
}
}
```

the test is more or less:

```js
import React, { useEffect, useRef } from 'react';
import Payment from 'payment';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

test('test', () => {
function Fake() {
const container = useRef(null);

useEffect(() => {
Payment.formatCardCVC(container.current.querySelector('input'));
}, []);

return (




);
}

render();
userEvent.type(screen.getByRole('textbox'), 'invalid!');

expect(screen.getByRole('textbox')).toHaveValue('');
});
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.