使用React Testing库的ReactJS测试中的Typescript错误

问题描述

我正在使用ReactJS以及Material UI和Typescript。我要测试菜单-单击带有标签Location的按钮后应显示。新菜单应包含Location 1个项目。

describe('<LocationsMenu />',() => {
    let component: RenderResult;

    beforeEach(() => {
        component = render(<LocationsMenu />);
    });

    it('should show and hide on click on top item trigger',async () => {
        const button = component.getByText('Locations').parentElement;
        await act(async () => {
            fireEvent.click(button);
        });
        expect(component.getByText('Location 1')).tobedefined();
    });
});

这有效-测试通过。

Visual Studio 代码在fireEvent.click(button)行Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | Node | Document | Window'.中显示错误。我该如何避免呢？我知道我可以像这样打字：

fireEvent.click(button as Element);

或

const button = component.getByText('Locations').parentElement as Element;

但是也许有更好的解决方案。

解决方法

Typescript可以推断出源文件中任何位置的变量类型，您需要通过检查按钮是否不是HTMLElement来将其“投射”到HTMLElement | null而不是null >

// button may be null
const button = component.getByText('Locations').parentElement;

if (button) {
  // at this point,typescript knows that button cannot be null
  // so it has HTMLElement type in the block
  fireEvent.click(button);
}

还请注意，我没有将fireEvent.click()包装在act()内。这是因为react-testing-library已经为您完成了此操作，因此这里没有必要。

如果您只是想简洁起见，并且您完全确定元素存在，否则测试将失败，则可以通过添加非空断言运算符这样的方式来确保打字稿


<div class="form-group">
    <input type="text" class="form-control" @bind="Value" @onkeyup="OnKeyUp" placeholder="@Placeholder"/>
</div>

@code {
    
    [Parameter]
    public string Value { get; set; }

    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }

    [Parameter]
    public string Placeholder { get; set; }

    private void OnKeyUp(KeyboardEventArgs obj)
    {
        ValueChanged.InvokeAsync(Value);
    }

}

react-testing-library reactjs reactjs typescript typescript