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

Question

我想给我的组件发短信。我有带选择的表格和带文本的段落。当我从选择 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，但我得到了相同的结果：

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 - 结果相同。

Answer 1

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

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