我刚刚编写了第一个Reactjs
组件,我准备编写一些测试(我使用material-ui
' s Table
和Toggle
)。
我读到jest
和enzyme
,但我觉得我还在遗漏一些东西。
我的组件看起来像这样(简化):
export default class MyComponent extends Component {
constructor() {
super()
this.state = {
data: []
}
// bind methods to this
}
componentDidMount() {
this.initializeData()
}
initializeData() {
// fetch data from server and setStates
}
foo() {
// manuipulatig data
}
render() {
reutrn (
<Toggle
id="my-toggle"
...
onToggle={this.foo}
>
</Toggle>
<MyTable
id="my-table"
data={this.state.data}
...
>
</MyTable>
)
}
}
现在进行测试。我想为以下场景编写测试:
所以我从一开始就开始:
describe('myTestCase', () => {
it('myFirstTest', () => {
const wrapper = shallow(<MyComponent/>);
}
})
我跑了,但失败了:ReferenceError: fetch is not defined
我的第一个问题是,如何模拟initializeData
以克服使用fetch调用真实代码的需要?
我按照这个答案:https://stackoverflow.com/a/48082419/2022010并提出以下内容:
describe('myTestCase', () => {
it('myFirstTest', () => {
const spy = jest.spyOn(MyComponent.prototype, 'initializeData'
const wrapper = mount(<MyComponent/>);
}
})
但我仍然遇到同样的错误(我也尝试使用componentDidMount
代替initializeData
,但结果却一样。)
更新:我错了。我确实得到了一个fetch未定义的错误,但这次它来自Table组件(这是material-ui表的包装)。现在我开始思考它,我确实有很多&#34;取出&#34;一路上......我想知道如何照顾他们。
答案 0 :(得分:1)
fetch
,但是jest / enzyme在Node环境中运行,因此fetch
在测试代码中不是全局可用的功能。有几种方法可以解决此问题:
1:全局模拟fetch
-这可能是最简单的解决方案,但可能不是最干净的解决方案。
global.fetch = jest.fn().mockResolvedValue({
json: () => /*Fake test data*/
// or mock a response with `.text()` etc if that's what
// your initializeData function uses
});
2:将您的提取调用抽象到服务层,并将其作为依赖项注入-这将使您的代码更灵活(尽管样板更为丰富),因为您可以将提取实现隐藏在所选接口的后面。然后,在将来的任何时候,如果您决定使用其他提取库,都可以在服务层中换掉实现。
// fetchService.js
export const fetchData = (url) => {
// Simplified example, only takes 'url', doesn't
// handle errors or other params.
return fetch(url).then(res => res.json());
}
// MyComponent.js
import {fetchService} from './fetchService.js'
class MyComponent extends React.Component {
static defaultProps = {
// Pass in the imported fetchService by default. This
// way you won't have to pass it in manually in production
// but you have the option to pass it in for your tests
fetchService
}
...
initializeData() {
// Use the fetchService from props
this.props.fetchService.fetchData('some/url').then(data => {
this.setState({ data });
})
}
}
// MyComponent.jest.js
it('myFirstTest', () => {
const fetchData = jest.fn().mockResolvedValue(/*Fake test data*/);
const fetchService = { fetchData };
const wrapper = mount(<MyComponent fetchService={fetchService} />);
return Promise.resolve().then(() = {
// The mock fetch will be resolved by this point, so you can make
// expectations about your component post-initialization here
})
}