Юнит-тестирование в реакции не учитывает ширину в процентах. Я столкнулся с этой проблемой при тестировании более сложного компонента и воспроизвел его в более простом сценарии. Я провел следующие тесты по-разному.
let div: HTMLElement = null
beforeEach(() => {
div = document.createElement('div');
document.body.appendChild(div);
})
//Test 1
it('testing widths', async () => {
act(() => {
render(<div id="big" style={{ width: "100px" }}><div id="small" style={{ width: "100%" }}></div></div>, div);
})
expect($("#big").width()).toBe(100) //passes
expect($("#stup").width()).toBe(100) //fails (recieved - 0)
});
//Test 2
it('testing widths', async () => {
act(() => {
render(<div id="big" style={{ width: "100px" }}><div id="small" style={{ width: "100px" }}></div></div>, div);
})
expect($("#big").width()).toBe(100) //passes
expect($("#stup").width()).toBe(100) //passes
});
//Test 3
it('testing widths', async () => {
act(() => {
render(<div id="big" style={{ width: "100px" }}><div id="small"></div></div>, div);
})
$("#small").width("100%")
expect($("#big").width()).toBe(100) //passes
expect($("#small").width()).toBe(100) //fails (recieved - 0)
});
//Test 4
it('testing widths', async () => {
act(() => {
render(<div id="big" style={{ width: "100px" }}><div id="small"></div></div>, div);
})
$("#small").width("100")
expect($("#big").width()).toBe(100) //passes
expect($("#small").width()).toBe(100) //passes
});
И по какой-то причине это тоже не получается (100 вместо 100px)
it('testing widths', async () => {
act(() => {
render(<div id="big" style={{ width: "100" }}><div id="small" style={{ width: "100" }}></div></div>, div);
})
expect($("#big").width()).toBe(100) //fails (recieved - 0)
expect($("#small").width()).toBe(100) //fails (recieved - 0)
});
Как я могу это исправить?