Question

react中的单元测试似乎并不考虑百分比宽度。我在测试一个更复杂的组件时遇到了这个问题，并在一个简单的场景中对其进行了重现。我以不同的方式运行了以下测试。

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像素而不是100像素）

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

我该如何解决？

百分比宽度在反应测试中不起作用

0 个答案: