时间戳

首页 > 解决方案 > React 测试库 - 多个 fireEvent 不检查文本

react-testing-library - React 测试库 - 多个 fireEvent 不检查文本

问题描述

我想给我的组件发短信。我有带选择的表格和带文本的段落。当我从选择 6 中选择时，段落将文本更改为“6 件”。当我从选择 9 中选择时，段落将文本更改为“9 件”等。

问题是，它只适用于第一次。第二个我在段落中有旧文本。如何刷新每个选择更改？

const { getByTestId } = renderForm();

const textElem = getByTestId('text');
const select = getByTestId('select');


fireEvent.change(select, { target: { value: '6' } });

// works fine
expect(textElem).toHaveTextContent('6 pieces');


fireEvent.change(select, { target: { value: '9' } });

// is still 6 pieces
expect(textElem).toHaveTextContent('9 pieces');

我也尝试过采取行动，但我得到了相同的结果：

act(()=>{
    fireEvent.change(select, { target: { value: '6' } });
});

// works fine
expect(textElem).toHaveTextContent('6 pieces');


act(()=>{
    fireEvent.change(select, { target: { value: '9' } });
});

// is still 6 pieces
expect(textElem).toHaveTextContent('9 pieces');

我也试过rerender- 相同的结果。

标签： react-testing-library

解决方案

触发更改后，您需要对其进行新的getByTestId()断言。

fireEvent.change(select, { target: { value: '9' } }); expect(getByTestId('text')).toHaveTextContent('9 pieces')

推荐阅读