如何在定义为箭头函数（class 属性）的 React 组件上测试组件方法？

Question

我可以使用间谍和 Component.prototype 测试 class 方法。但是，我的许多 class 方法都是 class 属性，因为我需要使用 this（对于 this.setState 等），而且在构造函数中绑定非常繁琐且看起来很难看，我认为使用箭头函数要好得多。我使用 class 属性构建的组件在浏览器中工作，所以我知道我的 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（不是 class 方法）并且没有错误运行，除了最后一个测试之外的所有其他测试也是如此。对于上次测试，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 而不是 shallow，然后使用 Chat.instance 而不是 Chat.prototype，但据我了解，如果我这样做，酶也会渲染 Chat 的 children，我当然不希望这样。我实际上尝试使用 mount，但 Jest 开始抱怨 connect(ChatForm) 在其上下文或道具中没有 store（ChatForm 连接到 redux，但我想测试我的 redux-connected 组件通过导入 non-connected 组件并模拟 redux 存储）。有谁知道如何使用 Jest 和 Enzyme 测试 React 组件的 class 属性？提前致谢！

Answer 1

即使渲染很浅，也可以调用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();
 });

如何在定义为箭头函数（class 属性）的 React 组件上测试组件方法？

How do I test component methods on a React component that are defined as arrow functions (class properties)?

javascript

class-method

reactjs

jestjs

enzyme