我正在为组件编写一些测试，但在这里遇到了一些麻烦...
这是我的游戏组件：
import React, { Component } from 'react';
import User from './user';
import Board from './board';
class Game extends Component {
constructor(props) {
super(props);
this.board = new Board();
//some more code
}
//some more code
initializeUser(name) {
const user = new User(name);
//some more code
user.pickCards();
//some more code
}
//some more code
render() {
return (
<div className="game-container">
</div>
);
}
}
export default Game;
我的董事会组件：
import React, { Component } from 'react';
class Board extends Component {
constructor(props) {
super(props);
//some more code
}
//some more code
}
export default Board;
我的用户组件：
import React, { Component } from 'react';
class User extends Component {
constructor(props) {
super(props);
this.name = this.props.name;
//some more code
}
//some more code
pickCards() {
//some code
}
//some more code
}
export default User;
[现在，在我的测试中，我试图测试是否调用了Board和User，以及是否也调用了pickCards()。
这是我的测试：
import React from 'react';
import { mount } from 'enzyme';
import Game from './user';
import User from './user';
import Board from './board';
describe('Game start', () => {
//some more code
it('test 1', () => {
//some code
});
it('test where I'm having problems', () => {
const boardSpy = jest.spyOn(Board, 'constructor'),
userSpy = jest.spyOn(User, 'constructor'),
pickCardMock = jest.fn();
User.pickCard = pickCardMock;
const wrapper = mount(<Game />, { attachTo: container });
expect(boardSpy).toHaveBeenCalledTimes(1);
expect(userSpy).toHaveBeenCalledTimes(1);
expect(pickCardMock).toHaveBeenCalledTimes(1);
//some more code
});
it('test 3', () => {
//some code
});
});
我不想模拟Board和User，因为我需要一切正常工作。但是我想监视他们以检查他们是否真的被召唤。而且我想模拟pickCard()。
我已经在测试中尝试使用jest.mock('./board');和require('board')（例如），但是没有用。现在，我试图监视组件的构造函数。
但是expect(boardSpy).toHaveBeenCalledTimes(1)无法说被调用0次而不是1次。
[pickCardMock似乎没有链接到User模块，因为调试pickCard是正常函数而不是模拟函数，并且expect(pickCardMock).toHaveBeenCalledTimes(1)也接收0而不是1。
任何人都知道如何解决这两个问题（监视模块并模拟模块中的函数）？
Game.jsx：import React, { Component } from 'react';
import User from './User';
import Board from './Board';
class Game extends Component {
constructor(props) {
super(props);
this.board = new Board({});
}
initializeUser(name) {
const user = new User(name);
user.pickCards();
}
render() {
return <div className="game-container"></div>;
}
}
export default Game;
Board.jsx：
import React, { Component } from 'react';
class Board extends Component {
constructor(props) {
super(props);
}
render() {
return 'Board';
}
}
export default Board;
User.jsx：import React, { Component } from 'react';
class User extends Component {
constructor(props) {
super(props);
this.name = this.props.name;
}
pickCards() {
console.log('pick cards real implementation');
}
render() {
return 'User';
}
}
export default User;
Game.test.jsx：import React from 'react';
import { mount } from 'enzyme';
import Game from './Game';
import BoardMock from './Board';
import UserMock from './User';
jest.mock('./User', () => {
const mUser = { pickCards: jest.fn() };
return jest.fn(() => mUser);
});
jest.mock('./Board', () => jest.fn());
describe('62199135', () => {
afterAll(() => {
jest.resetAllMocks();
});
it('should pass', () => {
const userMock = new UserMock();
const wrapper = mount(<Game />);
const gameInstance = wrapper.instance();
gameInstance.initializeUser('some name');
expect(BoardMock).toHaveBeenCalledTimes(1);
expect(UserMock).toHaveBeenCalledWith('some name');
expect(userMock.pickCards).toHaveBeenCalledTimes(1);
});
});
您可以在运行所有测试用例后重置所有模拟。
单元测试结果：
PASS stackoverflow/62199135/Game.test.jsx (10.16s)
62199135
✓ should pass (33ms)
----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files | 100 | 100 | 100 | 100 |
Game.jsx | 100 | 100 | 100 | 100 |
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 11.474s, estimated 12s