さまざまなコンポーネントで使用されている以下のようないくつかのヘルパー関数を含むHelper.js
ファイルがあります。
export function buildOptions(elem) {
var oList=[];
for (var i=0; i < field.length; i++) {
oList.Push (
<option value={options[i]["id"]}>
{options[i][elem]}
</option>
)
}
return oList;
}
export function B(){
.....
}
以下は、Helper.js
ファイルで定義された関数を利用するコンポーネントです。私はコンポーネントのテストを書いており、ここで呼び出されている外部関数を模擬したいと思います。
import React from 'react';
import ReactDOM from 'react-dom';
import { buildOptions, A} from './Helper.js';
class DemoComponent extends React.Component {
constructor(props) {
super(props);
}
add(e, index) {
....
}
render() {
var o_list=buildOptions("name");
return (
<div>
...
<select required className={selectClass} >
{o_list}
</select>
...
<button type="button" onClick={(e) => this.add(e, this.props.index)}>
Add
</button>
</div>
);
};
}
私はJest/Enzymeを初めて使用し、外部関数buildOptionsをモックする方法を理解できません。外部のbuildOptions関数をモックする方法を理解できません。誰かこれを手伝っていただけませんか。これが私のテストコードです:
import React from 'react';
import { mount, shallow } from 'enzyme';
import { buildOptions } from '../components/Helper.js';
import DemoComponent from '../components/DemoComponent';
describe('Democomponent', () => {
it('should render required elements', () => {
const wrapper = shallow(
<DemoComponent
index={0}/>
);
//
tests
});
名前付きエクスポート関数をモックするにする必要があるため、テストの前に*
)を使用してすべての名前付きエクスポートをインポートするを含む特別なトリックがあります。
// your test file
import * as Helper from './Helper.js';
const originalBuildOptions = Helper.buildOptions;
Helper.buildOptions = jest.fn();
beforeEach(() => {
jest.clearAllMocks();
// Reset to original implementation before each test
Helper.buildOptions.mockImplementation(originalBuildOptions);
});
test('my test', () => {
// Mock for this test only (will be restored by next `beforeEach` call)
Helper.buildOptions.mockImplementation(() => 'your mock');
});