我正在尝试测试组件是否由于输入元素的更改而更新。我使用fireEvent.change()
-function,然后检查我发现使用getByPlaceholderText
它的节点的值是否已按应有的方式更新。但是我看不到反应组件本身的变化。
这可能是因为在重新渲染之前不会发生更改;我将如何测试这个?react-testing-libraryrerender
似乎“从头开始”启动组件(即没有新的输入值),并且waitForElement
永远找不到它正在等待的内容。
这是组件 TestForm.js:
import React from 'react';
import { withState } from 'recompose';
const initialInputValue = 'initialInputValue';
const TestForm = ({ inputValue, setInputValue }) => (
<>
{console.log('inputValue', inputValue)}
<input value={inputValue} onChange={(e) => setInputValue(e.target.value)} placeholder="placeholder" />
{inputValue !== initialInputValue && <div>Input has changed</div>}
</>
);
export default withState('inputValue', 'setInputValue', initialInputValue)(TestForm);
这是测试,运行使用npx jest test.js
:
import React from 'react';
import { cleanup, fireEvent, render, waitForElement } from 'react-testing-library';
import TestForm from './TestForm';
afterEach(cleanup);
describe('TestForm', () => {
it('Change input', async () => {
const { getByPlaceholderText, getByText } = render(<TestForm />);
const inputNode = getByPlaceholderText('placeholder');
fireEvent.change(inputNode, { target: { value: 'new value' } });
console.log('inputNode.value', inputNode.value);
await waitForElement(() => getByText('Input has changed'));
});
});