如何解决使用反应浅渲染器对输入进行反应测试 onChange
我正在尝试使用 onChange 道具测试 React 的 searchForm 组件。
const SearchForm = () => {
const [value,setValue] = useState('');
return (
<form className={styles.searchForm}>
<input
value={value}
onChange={(e) => setValue(e.target.value)} // test this line
className={styles.searchForm__input}
/>
<button type="submit" aria-label="Search" className={styles.searchForm__button} />
</form>
);
};
这是我的测试示例:
import React from 'react';
import ShalloWrenderer from 'react-test-renderer/shallow';
import SearchForm from '../index';
const setUp = () => {
const renderer = new ShalloWrenderer();
renderer.render(<SearchForm />);
return renderer.getRenderOutput();
};
describe('render form component',() => {
it('handle onChange in form input field',() => {
const result = setUp();
expect(result).toMatchSnapshot();
});
});
这个测试通过了,但 JEST 说这行代码(带有 onChange)没有被发现。
我找到了如何启动 onChange:
result.props.children[0].props.onChange();
这会启动原始道具,但我在 e.target 上出错——无法读取未定义的属性。 我觉得我需要以某种方式模拟 setValue,但我不知道如何。我是 JEST 的新手。 也许这可以通过 react-test-renderer 以更好的方式完成。
解决方法
解决办法如下:
index.tsx
:
import React,{ useState } from 'react';
export const SearchForm = () => {
const [value,setValue] = useState('');
return (
<form>
<input value={value} onChange={(e) => setValue(e.target.value)} />
<button type="submit" aria-label="Search" />
</form>
);
};
index.test.tsx
:
import React from 'react';
import TestRenderer,{ act } from 'react-test-renderer';
import ShallowRenderer from 'react-test-renderer/shallow';
import { SearchForm } from './';
describe('66907704',() => {
it('should handle onChange event',() => {
const testRenderer = TestRenderer.create(<SearchForm />);
const testInstance = testRenderer.root;
expect(testInstance.findByType('input').props.value).toEqual('');
const mEvent = { target: { value: 'teresa teng' } };
act(() => {
testInstance.findByType('input').props.onChange(mEvent);
});
expect(testInstance.findByType('input').props.value).toEqual('teresa teng');
});
it('should handle onChange event when use shallow render',() => {
const shallowRenderer = ShallowRenderer.createRenderer();
shallowRenderer.render(<SearchForm />);
let tree = shallowRenderer.getRenderOutput();
let input = tree.props.children[0];
const mEvent = { target: { value: 'teresa teng' } };
input.props.onChange(mEvent);
tree = shallowRenderer.getRenderOutput();
input = tree.props.children[0];
expect(input.props.value).toEqual('teresa teng');
});
});
单元测试结果:
PASS examples/66907704/index.test.tsx (6.636 s)
66907704
✓ should handle onChange event (10 ms)
✓ should handle onChange event when use shallow render (1 ms)
-----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-----------|---------|----------|---------|---------|-------------------
All files | 100 | 100 | 100 | 100 |
index.tsx | 100 | 100 | 100 | 100 |
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed,1 total
Tests: 2 passed,2 total
Snapshots: 0 total
Time: 7.443 s
包版本:
"jest": "^26.6.3","react": "^16.14.0",
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。