如何解决在 reactjs 酶测试中围绕测试渲染器和模拟事件包装行为方法的正确方法是什么
我在网上找到了一些区分 test-renderer 和 react-dom/utils 的例子,但它仍然显示恼人的警告信息。
参考文献:
- https://someweb.github.io/reactjs/unit-testing-reactjs/
- https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning
- https://codesandbox.io/s/k14k63y03v?file=/src/index.spec.js:377-475
WrapProvider.tsx
import React,{ FC } from 'react';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';
import store,{ history } from 'src/store/getStore';
import MasterWrap from 'src/Main/MasterWrap';
// Note: adding MasterWrap is what is breaking test-renderer ..
const WrapProvider: FC = ({ children }) => (
<Provider store={store}>
<ConnectedRouter history={history}>
<MasterWrap>{children}</MasterWrap>
</ConnectedRouter>
</Provider>
);
export { store,history };
export default WrapProvider;
Component.test.tsx
import React from 'react';
import { mount } from 'enzyme';
import renderer,{ act as actRenderer } from 'react-test-renderer';
import { act as actMount } from 'react-dom/test-utils';
import WrapProvider,{ store } from '__tests__/__utils__/WrapProvider';
import ButtonShare from 'stories/ButtonShare/_ButtonShare';
import { ANIMATION_DURATION } from 'src/config';
let wrapper: any;
let tree: any;
const dataTestId = 'btn-share-controls-dialog__create-account';
const dialogName = 'create-account';
describe('Story - ButtonShare',() => {
beforeAll(() => {
actRenderer(() => {
tree = renderer
.create(
<WrapProvider>
<ButtonShare />
</WrapProvider>
)
.toJSON();
});
actMount(() => {
wrapper = mount(
<WrapProvider>
<ButtonShare />
</WrapProvider>
);
});
});
describe('Onload',() => {
it('should match snapshot - or refactor test',() => {
expect(tree).toMatchSnapshot();
});
it('should contain - button',() => {
const $btn = wrapper.find(`[data-testid="${dataTestId}"]`);
expect($btn.exists()).toBe(true);
});
it('should contain - button with aria-pressed = false',() => {
const $btn = wrapper.find(`[data-testid="${dataTestId}"]`).first();
expect($btn.prop('aria-pressed')).toBe(false);
});
});
// This is the section which is breaking the test.
// However,if I remove test renderer above,and do not test agains the snapshot then it also does not show warning.
describe('Click button',() => {
beforeAll(async () => {
const $btn = wrapper.find(`[data-testid="${dataTestId}"]`).first();
actMount(() => {
$btn.simulate('click');
});
await new Promise(resolve => {
setTimeout(() => {
wrapper.update();
resolve(true);
},ANIMATION_DURATION + 1);
});
});
it('should contain - dialog-bg',() => {
expect(wrapper.find(`[data-testid="dialog-bg-${dialogName}"]`).exists()).toBe(true);
});
});
})
警告:看起来您在测试交互中使用了错误的 act()。 请务必使用与您的渲染器对应的匹配版本的 act():
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。