我使用 create-app-component 创建一个项目,它使用构建脚本(babel、webpack、jest)配置新应用程序。
我编写了一个正在尝试测试的 React 组件。该组件需要另一个 javascript 文件,公开一个函数。
我的 search.js 文件
export {
search,
}
function search(){
// does things
return Promise.resolve('foo')
}
我的 react 组件:
import React from 'react'
import { search } from './search.js'
import SearchResults from './SearchResults'
export default SearchContainer {
constructor(){
this.state = {
query: "hello world"
}
}
componentDidMount(){
search(this.state.query)
.then(result => { this.setState({ result, })})
}
render() {
return <SearchResults
result={this.state.result}
/>
}
}
在我的单元测试中,我想检查是否使用正确的参数调用了 search
方法。
我的测试看起来像这样:
import React from 'react';
import { shallow } from 'enzyme';
import should from 'should/as-function';
import SearchResults from './SearchResults';
let mockPromise;
jest.mock('./search.js', () => {
return { search: jest.fn(() => mockPromise)};
});
import SearchContainer from './SearchContainer';
describe('<SearchContainer />', () => {
it('should call the search module', () => {
const result = { foo: 'bar' }
mockPromise = Promise.resolve(result);
const wrapper = shallow(<SearchContainer />);
wrapper.instance().componentDidMount();
mockPromise.then(() => {
const searchResults = wrapper.find(SearchResults).first();
should(searchResults.prop('result')).equal(result);
})
})
});
我已经很难弄清楚如何使 jest.mock
工作,因为它要求变量以 mock
为前缀。
但是,如果我想测试 search
方法的参数,我需要使模拟函数在我的测试中可用。
如果我转换模拟部分,以使用变量:
const mockSearch = jest.fn(() => mockPromise)
jest.mock('./search.js', () => {
return { search: mockSearch};
});
我收到此错误:
TypeError: (0 , _search.search) is not a function
无论我尝试访问 jest.fn
并测试参数,我都无法使其工作。
我做错了什么?
最佳答案
问题
您收到该错误的原因与各种操作的提升方式有关。
即使在原始代码中,您仅在为 mockSearch
赋值并调用 jest 的 mock
后导入 SearchContainer
>,specs指出:在实例化模块之前,它请求的所有模块都必须可用
。
因此,在导入 SearchContainer
并依次导入 search
时,您的 mockSearch
变量仍然未定义。
人们可能会觉得这很奇怪,因为它似乎也意味着 search.js
尚未被 mock ,因此 mock 根本不起作用。幸运的是,(babel-)jest 确保提升对 mock
和类似函数的调用,甚至比导入更高,这样模拟才能发挥作用。
尽管如此,mock 函数引用的 mockSearch
的赋值不会通过 mock
调用进行提升。因此,相关操作的顺序将类似于:
- 为
./search.js
设置模拟工厂 - 导入所有依赖项,这将调用模拟工厂的函数来提供组件
- 为
mockSearch
赋值
当第 2 步发生时,传递给组件的 search
函数将是未定义的,并且第 3 步中的赋值来不及更改它。
解决方案
如果您创建模拟函数作为 mock
调用的一部分(这样它也会被提升),那么当组件模块导入它时,它将具有一个有效值,因为您的早期示例显示。
正如您所指出的,当您想让模拟函数在测试中可用时,问题就开始了。有一个明显的解决方案:单独导入您已经模拟的模块。
既然您现在知道 Jest mock 实际上发生在导入之前,一个简单的方法是:
import { search } from './search.js'; // This will actually be the mock
jest.mock('./search.js', () => {
return { search: jest.fn(() => mockPromise) };
});
[...]
beforeEach(() => {
search.mockClear();
});
it('should call the search module', () => {
[...]
expect(search.mock.calls.length).toBe(1);
expect(search.mock.calls[0]).toEqual(expectedArgs);
});
事实上,您可能想要替换:
import { search } from './search.js';
与:
const { search } = require.requireMock('./search.js');
这不应该产生任何功能上的差异,但可能会让你正在做的事情更加明确(并且应该帮助任何使用 Flow 等类型检查系统的人,所以它不会认为你试图在原始搜索
上调用模拟函数)。
附加说明
只有当您需要模拟的是模块本身的默认导出时,所有这些都是绝对必要的。否则(正如 @publicJorn 指出的那样),您可以简单地在测试中重新分配特定的相关成员,如下所示:
import * as search from './search.js';
beforeEach(() => {
search.search = jest.fn(() => mockPromise);
});
关于javascript - 无法用 Jest 模拟模块并测试函数调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39633919/