jessepollak / jessepollak/payment
Payment don't work with jest
- 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.