Процентные ширины не работают при тестировании реакции - PullRequest
0 голосов
/ 26 апреля 2020

Юнит-тестирование в реакции не учитывает ширину в процентах. Я столкнулся с этой проблемой при тестировании более сложного компонента и воспроизвел его в более простом сценарии. Я провел следующие тесты по-разному.

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)
    });

Как я могу это исправить?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...