javascript – 如何测试React组件上定义为箭头函数(类属性)的组件方法?
作者:互联网
我可以通过使用spies和Component.prototype来测试类方法.但是,我的许多类方法都是类属性,因为我需要使用它(对于this.setState等),并且因为构造函数中的绑定非常繁琐且看起来很丑,所以在我看来使用箭头函数要好得多.我使用类属性构建的组件在浏览器中工作,所以我知道我的babel配置是正确的.以下是我要测试的组件:
//Chat.js
import React from 'react';
import { connect } from 'react-redux';
import { fetchThreadById, passMessageToRedux } from '../actions/social';
import withLogin from './hoc/withLogin';
import withTargetUser from './hoc/withTargetUser';
import withSocket from './hoc/withSocket';
import ChatMessagesList from './ChatMessagesList';
import ChatForm from './ChatForm';
export class Chat extends React.Component {
state = {
messages : [],
};
componentDidMount() {
const { auth, targetUser, fetchThreadById, passMessageToRedux } = this.props;
const threadId = this.sortIds(auth._id, targetUser._id);
//Using the exact same naming scheme for the socket.io rooms as the client-side threads here
const roomId = threadId;
fetchThreadById(threadId);
const socket = this.props.socket;
socket.on('connect', () => {
console.log(socket.id);
socket.emit('join room', roomId);
});
socket.on('chat message', message => passMessageToRedux(message));
//socket.on('chat message', message => {
// console.log(message);
// this.setState(prevState => ({ messages: [ ...prevState.messages, message ] }));
//});
}
sortIds = (a, b) => (a < b ? `${a}_${b}` : `${b}_${a}`);
render() {
const { messages, targetUser } = this.props;
return (
<div className='chat'>
<h1>Du snakker med {targetUser.social.chatName || targetUser.info.displayName}</h1>
<ChatMessagesList messages={messages} />
<ChatForm socket={this.props.socket} />
</div>
);
}
}
const mapStateToProps = ({ chat: { messages } }) => ({ messages });
const mapDispatchToProps = dispatch => ({
fetchThreadById : id => dispatch(fetchThreadById(id)),
passMessageToRedux : message => dispatch(passMessageToRedux(message)),
});
export default withLogin(
withTargetUser(withSocket(connect(mapStateToProps, mapDispatchToProps)(Chat))),
);
Chat.defaultProps = {
messages : [],
};
这是测试文件:
//Chat.test.js
import React from 'react';
import { shallow } from 'enzyme';
import { Server, SocketIO } from 'mock-socket';
import { Chat } from '../Chat';
import users from '../../fixtures/users';
import chatMessages from '../../fixtures/messages';
let props,
auth,
targetUser,
fetchThreadById,
passMessageToRedux,
socket,
messages,
wrapper,
mockServer,
spy;
beforeEach(() => {
window.io = SocketIO;
mockServer = new Server('http://localhost:5000');
mockServer.on('connection', server => {
mockServer.emit('chat message', chatMessages[0]);
});
auth = users[0];
messages = [ chatMessages[0], chatMessages[1] ];
targetUser = users[1];
fetchThreadById = jest.fn();
passMessageToRedux = jest.fn();
socket = new io('http://localhost:5000');
props = {
mockServer,
auth,
messages,
targetUser,
fetchThreadById,
passMessageToRedux,
socket,
};
});
afterEach(() => {
mockServer.close();
jest.clearAllMocks();
});
test('Chat renders correctly', () => {
const wrapper = shallow(<Chat {...props} />);
expect(wrapper).toMatchSnapshot();
});
test('Chat calls fetchThreadById in componentDidMount', () => {
const wrapper = shallow(<Chat {...props} />);
const getThreadId = (a, b) => (a > b ? `${b}_${a}` : `${a}_${b}`);
const threadId = getThreadId(auth._id, targetUser._id);
expect(fetchThreadById).toHaveBeenLastCalledWith(threadId);
});
test('Chat calls componentDidMount', () => {
spy = jest.spyOn(Chat.prototype, 'componentDidMount');
const wrapper = shallow(<Chat {...props} />);
expect(spy).toHaveBeenCalled();
});
test('sortIds correctly sorts ids and returns threadId', () => {
spy = jest.spyOn(Chat.prototype, 'sortIds');
const wrapper = shallow(<Chat {...props} />);
expect(spy).toHaveBeenCalled();
});
检测是否调用componentDidMount(不是类方法)的倒数第二个测试运行没有错误,除了最后一个测试之外的所有其他测试都是如此.对于最后一次测试,Jest给出了以下错误:
FAIL src\components\tests\Chat.test.js
● sortIds correctly sorts ids and returns threadId
Cannot spy the sortIds property because it is not a function; undefined given instead
65 |
66 | test('sortIds correctly sorts ids and returns threadId', () => {
> 67 | spy = jest.spyOn(Chat.prototype, 'sortIds');
68 | const wrapper = shallow(<Chat {...props} />);
69 | expect(spy).toHaveBeenCalled();
70 | });
at ModuleMockerClass.spyOn (node_modules/jest-mock/build/index.js:699:15)
at Object.<anonymous> (src/components/tests/Chat.test.js:67:16)
我被告知我可以使用来自酶而不是浅的mount然后使用Chat.instance而不是Chat.prototype,但据我所知,如果我这样做,酶也会渲染Chat的孩子,我当然不希望这样.我实际上尝试使用mount,但随后Jest开始抱怨connect(ChatForm)没有在其上下文或道具中存储(ChatForm连接到redux,但我喜欢通过导入非连接组件来测试我的redux连接组件,嘲笑redux商店).有谁知道如何使用Jest和Enzyme测试React组件的类属性?提前谢谢!
解决方法:
即使渲染很浅,也可以调用wrapper.instance()方法.
it("should call sort ids", () => {
const wrapper = shallow(<Chat />);
wrapper.instance().sortIds = jest.fn();
wrapper.update(); // Force re-rendering
wrapper.instance().componentDidMount();
expect(wrapper.instance().sortIds).toBeCalled();
});
标签:enzyme,javascript,reactjs,jestjs,class-method 来源: https://codeday.me/bug/20190823/1697576.html