gpt4 book ai didi

reactjs - Jest 模拟 window.scrollTo

转载 作者:行者123 更新时间:2023-12-03 19:43:58 24 4
gpt4 key购买 nike

我的 React 组件调用 window.scrollTo当我运行我的 Jest 测试时,它们通过了,但有一个控制台错误:

 console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
Error: Not implemented: window.scrollTo
at Object.<anonymous>.module.exports (/private/var/www/samplesite.com/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
at Window.scrollTo (/private/var/www/samplesite.com/node_modules/jsdom/lib/jsdom/browser/Window.js:544:7)
at scrollTo (/private/var/www/samplesite.com/back-end/utils/library.jsx:180:12)
at commitHookEffectList (/private/var/www/samplesite.com/node_modules/react-dom/cjs/react-dom.development.js:17283:26)
at commitPassiveHookEffects (/private/var/www/samplesite.com/node_modules/react-dom/cjs/react-dom.development.js:17307:3)
at Object.invokeGuardedCallbackImpl (/private/var/www/samplesite.com/node_modules/react-dom/cjs/react-dom.development.js:74:10)
at invokeGuardedCallback (/private/var/www/samplesite.com/node_modules/react-dom/cjs/react-dom.development.js:256:31)
at commitPassiveEffects (/private/var/www/samplesite.com/node_modules/react-dom/cjs/react-dom.development.js:18774:9)
at wrapped (/private/var/www/samplesite.com/node_modules/react-dom/node_modules/scheduler/cjs/scheduler-tracing.development.js:207:34)
at flushPassiveEffects (/private/var/www/samplesite.com/node_modules/react-dom/cjs/react-dom.development.js:18822:5) undefined

我尝试过以几种方式 mock 它(在测试本身以及在每次测试之前调用的 Jest setupFiles 中),但控制台错误不会消失:

尝试 1:
let window = {};
window.scrollTo = jest.fn();

尝试 2:
let scrollTo = jest.fn();
Object.defineProperty(window, "scrollTo", scrollTo);

尝试 3:
delete global.window.scrollTo;
global.window.scrollTo = () => {};

尝试 4:
global.window = {};
global.window.scrollTo = () => {};

我怎样才能摆脱这个控制台错误?谢谢。

最佳答案

对我来说,模拟 window.scrollTo在每个测试用例中。或者,将模拟代码放入 window.setup.js文件并将此文件的路径添加到 jest setupFiles配置,这两种方式都可以正常工作。

例如,
index.spec.tsx :

import React, { Component } from 'react';

class SomeComponent extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}

handleClick(e) {
e.preventDefault();
window.scrollTo(0, 0);
}

render() {
return (
<div>
<button onClick={this.handleClick}>Click Me!</button>
</div>
);
}
}

export default SomeComponent;
index.spec.tsx , 模拟 window.scrollTo在每个测试用例中。

import React from 'react';
import { shallow } from 'enzyme';
import SomeComponent from './';

describe('SomeComponent', () => {
test('should handle click', () => {
const wrapper = shallow(<SomeComponent></SomeComponent>);
const mEvent = { preventDefault: jest.fn() };
window.scrollTo = jest.fn();
wrapper.find('button').simulate('click', mEvent);
expect(mEvent.preventDefault).toBeCalled();
expect(window.scrollTo).toBeCalledWith(0, 0);
});
});
jest.config.js :

module.exports = {
preset: 'ts-jest',
testEnvironment: 'enzyme',
// setupFiles: ['/Users/ldu020/workspace/github.com/mrdulin/jest-codelab/src/stackoverflow/58585527/window.setup.js'],
setupFilesAfterEnv: ['jest-enzyme'],
testEnvironmentOptions: {
enzymeAdapter: 'react16'
},
coverageReporters: ['json', 'text', 'lcov', 'clover']
};

单元测试结果:

 PASS  src/stackoverflow/58585527/index.spec.tsx (6.114s)
SomeComponent
✓ should handle click (12ms)

Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 6.947s

或者,创建一个 window.setup.js文件并将文件路径放在 jest setupFiles :
window.setup.js :
window.scrollTo = jest.fn();
jest.config.js :

module.exports = {
preset: 'ts-jest',
testEnvironment: 'enzyme',
setupFiles: ['/Users/ldu020/workspace/github.com/mrdulin/jest-codelab/src/stackoverflow/58585527/window.setup.js'],
setupFilesAfterEnv: ['jest-enzyme'],
testEnvironmentOptions: {
enzymeAdapter: 'react16'
},
coverageReporters: ['json', 'text', 'lcov', 'clover']
};

单元测试结果:

 PASS  src/stackoverflow/58585527/index.spec.tsx
SomeComponent
✓ should handle click (12ms)

Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 3.33s, estimated 7s

他们两个都工作正常。

源代码: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/58585527

关于reactjs - Jest 模拟 window.scrollTo,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58585527/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com