使用react-native- Test -library测试警报

Question

react-native-testing-library能否找到使用Alert.alert()创建的警报

我的应用程序按预期创建了警报，但此测试失败：

// test

const Wrapper = props => (
  <Fragment>
    <SubscriptionProductDetailScreen
      product={product}
      testID={"SUBSCRIPTION_DETAIL_SCREEN"}
      addToCart={addToCartSpy}
      {...props}
    />
  </Fragment>
);

function createWrapper(customProps) {
  const wrapper = render(<Wrapper {...customProps} />);
  return wrapper;
}

beforeEach(() => {
  wrapper = createWrapper();
});

// later, inside a describe block:

  it('should show an alert if no bars are selected', async () => {
    pressSubmitButton()
    expect(addToCartSpy).not.toHaveBeenCalled()

    // const alert = await waitForElement(
    //   wrapper.queryByText("Please select up to 4 free items.")
    // )

    const alert = wrapper.queryByText("Please select up to 4 free items.")
    expect(alert).not.toBeNull()
  });

// brief excerpt from the component (the onPress handler for the submit button)

  addToCart() {
    const freeItems = this.state.items[0]

    if (!freeItems || !freeItems.selections.length) {
      Alert.alert("Error", "Please select up to 4 free items.")
      return
    }

    const item: {...}
    this.props.addToCart(item)
  }

异步版本(waitForElement，注释)也会失败。

同样，警报在应用程序本身中工作，并传递由处理程序调用的分派操作的断言。

Answer 1

Alert不在React应用程序堆栈中--它是一个系统特性，因此不能用react-native-testing-library直接测试。但是，您至少可以验证它是否已执行：

import { Alert } from 'react-native'

jest.mock('react-native', () => {
    const RN = jest.requireActual('react-native')

    return Object.setPrototypeOf(
        {
            Alert: {
                ...RN.Alert,
                alert: jest.fn(),
            },
        },
        RN,
    )
})


test('...', () => {
    // ...

    expect(Alert.alert).toHaveBeenCalled()
})