Jest expected and receive identical, but it still fails - jestjs

Question

I have this test :
it('Should return the date correctly formatted', async () => {
const page = await newE2EPage();
await page.setContent('<dsd-datepicker></dsd-datepicker>');
const input = await page.find('dsd-datepicker .duet-date__input');
await input.press('1');
await input.press('2');
await input.press('/');
await input.press('0');
await input.press('1');
await input.press('/');
await input.press('2');
await input.press('0');
await input.press('2');
await input.press('2');
const value = await input.getProperty('value');
expect(value).toBe('12 / 01 / 2022z');
});
It fails like this :
if I remove the "z" I added at the end it fails without any explanation :
I'm using stencjs e2e that uses pupperteer, I am wondering if this has to do with encoding, it just seems weird.

Answer 1

I tried to reproduce this, but wasn't able to with a 'plain' index tag. With the following component:
#Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true,
})
export class MyComponent {
render() {
return <input/>;
}
}
I created the following test
describe('my-component', () => {
it('renders', async () => {
const page = await newE2EPage();
await page.setContent('<my-component></my-component>');
// the '>>>' pierces the shadow dom
const input = await page.find('my-component >>> input');
await input.press('1');
await input.press('2');
await input.press('/');
await input.press('0');
await input.press('1');
await input.press('/');
await input.press('2');
await input.press('0');
await input.press('2');
await input.press('2');
const value = await input.getProperty('value');
expect(value).toBe('12/01/2022');
});
});
but the test passes for me. My tests are different from yours in two key regards though:
I'm using the standard input tag instead of dsd-datepicker
The value you're expecting has spaces around the '/' characters (which I'd guess is related to the datepicker).
I'd wager that this is related to dsd-datepicker but without seeing a full reproduction case, it's a little tricky to diagnose. But taking a closer look at dsd-datepicker is the first thing I'd do here. Not to say it isn't Stencil, but something interesting is happening here.
My shot in the dark guess/debugging suggestion would be to remove the calls await input.press('/'); in your test (and update the assertion accordingly).
[ ] Does it fail with expect(value).toBe('12012022z');?
[ ] Does is pass with expect(value).toBe('12012022');?
[ ] If yes to the above, what happens if we reintroduce just one of those slashes?
[ ] If no to the above, maybe there's some string trimming to be done here?
That might point you in the right direction to determine if this is a dsd-datepicker issue or a Stencil issue.
Some additional stats:
Node Version 16.11.0
npm Version 8.0.0
Stencil version 2.13.0