fix: add a convertCssObject to create a valid style object within the toHaveStyle.

[ludacirs]

What:

I created convertCssObject that assigns correct properties and values, and called getStyleDeclaration before it.

Why:

In the haveToStyle method, when given a property is in camelCase and the value is a number, there was a bug where incorrect test cases were passing due to internal comparison of empty strings.

so, the following tests pass.

// passed
const {container} = render(`<div class="border" style="border-width: 2px;/>`)
expect(container.querySelector('.border')).toHaveStyle({ borderWidth: '' })

// passed
const {container} = render(`<div class="border" style="border-width: 2px;/>`)
expect(container.querySelector('.border')).toHaveStyle({ borderWidth: 1 })

// passed
const {container} = render(`<div class="border" style="border-width: 2px;/>`)
expect(container.querySelector('.border')).toHaveStyle({ borderWidth: '2' })

I provided more detailed analysis in a comment on the relevant issue.

How:

When a number is passed as a value, I checked if the property requires the 'px' unit, and if so, appended 'px'. To prevent getPropertyValue function from returning an empty string when encountering camelCase, I converted properties to snake-case, excluding custom properties.

Checklist:

• Documentation
• tests
• Updated Type Definitions
• Ready to be merged