I expect valid value to return valid = true from initial onPhoneNumberChange

[BramKaashoek]

 test('the base component', () => {
    let isValid = undefined;
    render(
      <IntlTelInput
        value={'+447400123456'}
        defaultCountry={'GB'}
        onPhoneNumberChange={(valid: boolean, number: string, country: any) => {
          isValid = valid;
        }}
      />
    );

    expect(isValid).toBe(true);
  });

This spec in my own project fails while it should pass. When I implement an equivalent spec in a fork of your react-int-tel-input project, it passes:

 it('validates initial value', () => {
      let valid
      this.params = {
        ...this.params,
        value: '+447400123456',
        defaultCountry: 'GB',
        onPhoneNumberChange: (isValid, number, country) => {
          valid = isValid
        },
      }
      const subject = this.makeSubject()
      expect(valid).toBe(true)
    })

[mcataford]

Hi @BramKaashoek!

Thanks for reporting the issue! You mention a fork, are there any changes in that fork that aren't in master? I'm going to dig into this and see what I can find.

[mcataford]

It appears that this issue is related to #347 (and subsequently is being worked on in #348) and boils down to RTL not playing nice with the dynamic import that supports phone validation. Work is underway to remedy that, in the meantime, having an import for libphonenumber-js-utils in your test file should remove the asynchronousness of the import and allow your test to behave as if the validation was already ready. You can use this technique as a temporary workaround while the dynamic import is either being removed or handled better.

[DamageSami]

I am facing this same issue, phone number validation never passes. The issue came up when migrating my existing project from CRA to Vite. The workaround causes another error message: Uncaught TypeError: Cannot use 'in' operator to search for 'intlTelInputUtils' in undefined.

I can do a minimal reproduction of the problem (if someone is maintaining this project). With my previous CRA-installation, the input worked fine.

[ychakroun]

I am facing the same issue as you @DamageSami when i migrate my project to VITE, so i install https://github.com/catamphetamine/libphonenumber-js#validate-phone-number to validate it by my own.