# Vitest + React test input type

**URL:** <https://forum.codewithmosh.com/t/vitest-react-test-input-type/26195>\
**Category:** React\
**Created:** [April 20, 2024, 7:01pm UTC](https://forum.codewithmosh.com/t/vitest-react-test-input-type/26195 "2024-04-20T19:01:37Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![raedgeorge](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/raedgeorge/32/3560_2.png) [@raedgeorge](https://forum.codewithmosh.com/u/raedgeorge)\
**Post date:** [April 20, 2024, 7:01pm UTC](https://forum.codewithmosh.com/t/vitest-react-test-input-type/26195/1 "2024-04-20T19:01:37Z")

</div>

how to test input type.  
i used the following  
`expect(passwordInput.type).toEqual("text");`  
but i have red line under type

the test works successfully but i want to remove the red line

i want to test whether the type is text or password  
thanks

---

<div class="post-metadata">

**Author:** ![theorion](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/theorion/32/7783_2.png) [@theorion](https://forum.codewithmosh.com/u/theorion)\
**Post date:** [April 21, 2024, 5:41pm UTC](https://forum.codewithmosh.com/t/vitest-react-test-input-type/26195/2 "2024-04-21T17:41:19Z")

</div>

What is the error under type? hover mouse over it and it should give you some detail.

also would help to see where the passwordInput code is too

So your trying to check if the password is set to a text attribute?

---

<div class="post-metadata">

**Author:** ![raedgeorge](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/raedgeorge/32/3560_2.png) [@raedgeorge](https://forum.codewithmosh.com/u/raedgeorge)\
**Post date:** [April 25, 2024, 4:58pm UTC](https://forum.codewithmosh.com/t/vitest-react-test-input-type/26195/3 "2024-04-25T16:58:46Z")

</div>

when i hover over the error here what displays

**Property ‘type’ does not exist on type ‘HTMLElement’.ts(2339)**

# this is my test

it(“should show password when show password is checked”, async () =\> {  
const { passwordInput, showPasswordCheckBox, user } = renderComponent();

```
await user.type(passwordInput, "password");
expect(passwordInput.type).toEqual("password");

await user.click(showPasswordCheckBox);
expect(passwordInput.type).toEqual("text");

```

# });

what i am trying to do is to verify that when i user click show password, the passowrd input will  
by text input

---

<div class="post-metadata">

**Author:** ![theorion](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/theorion/32/7783_2.png) [@theorion](https://forum.codewithmosh.com/u/theorion)\
**Post date:** [April 25, 2024, 6:23pm UTC](https://forum.codewithmosh.com/t/vitest-react-test-input-type/26195/4 "2024-04-25T18:23:08Z")

</div>

can you show the constructor you made for the user property? and what is the error, hover mouse over red line.

I’m thinking if your using mongoose.Type It’s a capitol T but it’s on the user property from what it looks like.

---

<div class="post-metadata">

**Author:** ![raedgeorge](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/raedgeorge/32/3560_2.png) [@raedgeorge](https://forum.codewithmosh.com/u/raedgeorge)\
**Post date:** [April 25, 2024, 6:27pm UTC](https://forum.codewithmosh.com/t/vitest-react-test-input-type/26195/5 "2024-04-25T18:27:09Z")

</div>

regarding the user object there how i created it  
**user: userEvent.setup(),**

the user object I used to simulate user events for testing purposes

when i hover with the mouse over the red line here is the error  
Error: **Property ‘type’ does not exist on type ‘HTMLElement’.ts(2339)**

---

<div class="post-metadata">

**Author:** ![theorion](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/theorion/32/7783_2.png) [@theorion](https://forum.codewithmosh.com/u/theorion)\
**Post date:** [April 25, 2024, 7:08pm UTC](https://forum.codewithmosh.com/t/vitest-react-test-input-type/26195/6 "2024-04-25T19:08:14Z")

</div>

I would think you would need to create a user object in your testing suite something like this before you would be able to call user.type

const {USER} = require('…/user)

user= new User({  
passwordInput: {  
type:password},

click: {  
type: text}

also define the password property otherwise it’s null