在React中使用Jest测试mapStateToProps
中的方法,你需要模拟组件的props
以及store
npm install --save-dev jest @testing-library/react @testing-library/jest-dom @reduxjs/toolkit react-redux
mapStateToProps
连接到Redux store:// MyComponent.js
import React from 'react';
import { connect } from 'react-redux';
const MyComponent = ({ myMethod }) => {
return <div onClick={myMethod}>Click me</div>;
};
const mapStateToProps = (state) => ({
myMethod: state.myMethod,
});
export default connect(mapStateToProps)(MyComponent);
MyComponent.test.js
:// MyComponent.test.js
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
import MyComponent from './MyComponent';
const mockStore = configureStore([]);
describe('MyComponent', () => {
let store;
let myMethod;
beforeEach(() => {
myMethod = jest.fn();
store = mockStore({
myMethod,
});
});
it('should call myMethod when the div is clicked', () => {
const { getByText } = render(
<Provider store={store}>
<MyComponent />
</Provider>
);
fireEvent.click(getByText('Click me'));
expect(myMethod).toHaveBeenCalledTimes(1);
});
});
在这个测试中,我们首先使用redux-mock-store
创建了一个模拟的Redux store,并将myMethod
作为state的一部分。然后,我们使用@testing-library/react
的render
函数渲染了MyComponent
组件,并传入了模拟的store。
接下来,我们使用fireEvent.click()
模拟用户点击div元素。最后,我们使用Jest的expect()
函数检查`my调用次数是否为1。
这样,你就可以在React中使用Jest测试mapStateToProps
中的方法了。请注意,这个例子仅用于演示目的,实际项目中可能需要根据具体情况进行调整。
云+社区技术沙龙[第8期]
云原生正发声
Elastic 实战工作坊
高校公开课
Techo Day 第三期
云+社区技术沙龙[第16期]
云+社区技术沙龙[第9期]
DB TALK 技术分享会
T-Day
领取专属 10元无门槛券
手把手带您无忧上云