在 React Native 中测试 onLayout

Question

我正在尝试使用@testing-library/react-native测试使用onLayout事件的组件，该组件通过组件props使用setState函数，但该函数从未被调用：

expect(jest.fn()).toHaveBeenCalledWith(...expected)
Expected: 100
Number of calls: 0

我怎样才能做到这一点？怎么了？

元件：

type Props = {
children: React.ReactNode
setHeaderHeight: React.Dispatch<React.SetStateAction<number>>
}
const HeaderSetHeightWrapper = ({ children, setHeaderHeight }: Props) => {
return (
<Wrapper
onLayout={({
nativeEvent: {
layout: { height }
}
}) => {
setHeaderHeight(Math.floor(height))
}}
testID="header-h"
>
{children}
</Wrapper>
)
}
const Wrapper = styled.View`
position: absolute;
left: 0;
top: 0;
`

测试：

it('should set the header height on layout', async () => {
const mockHeight = 100
const setHeaderHeight = jest.fn()
const { getByTestId } = render(
<HeaderSetHeightWrapper setHeaderHeight={setHeaderHeight}>
<View style={{ width: 100, height: mockHeight }} />
</HeaderSetHeightWrapper>
)
const wrapper = getByTestId('header-h')
fireEvent(wrapper, new NativeTestEvent('onLayout', { nativeEvent: { layout: { height: mockHeight } } }))
await wait(() => expect(setHeaderHeight).toHaveBeenCalledWith(mockHeight))
})

Answer 1

@testing-library/react-native现在有一个fireEvent.layout触发器，至少从 v5.0.3 开始：

import { render, act, fireEvent } from '@testing-library/react-native';
test(() => {
const { getByTestId } = render(<MyComponent />);
const view = getByTestId('my-view');
act(() => {
fireEvent.layout(view, {
nativeEvent: {
layout: {
width: 300,
// etc
},
},
});
});
});

这应该会触发onLayout事件处理程序。

Answer 2

您可以使用fireEvent(element, eventName, data)，其文档在这里，其类型为：

type FireEventFunction = (
element: ReactTestInstance,
eventName: string,
...data: Array<any>
) => void;

因此，要触发onLayout，请使用layout事件名称：

// You can use any getBy* or another selector that returns a ReactTestInstance
fireEvent(getByText('Some label'), 'layout', {
nativeEvent: { layout: { height: 100 } },  // The event data you need
});

Answer 3

wrapper.find('Wrapper').simulate('layout')