gpt4 book ai didi

javascript - 如何模拟 React Component 的功能并挂载组件?

转载 作者:行者123 更新时间:2023-11-30 06:21:48 32 4
gpt4 key购买 nike

我有一个使用 fetch API 获取帖子的 React 组件。现在,在“开 Jest 测试”时,我想模拟获取 API 方法以从文件返回 json 数据。安装用于测试的组件,以通过查找类计数来计算帖子数。下面是代码。

测试文件代码

    import React from 'react';
import { mount } from 'enzyme';
import dummyjson from '../dummydata.json';
import DemoApp from '../index';

describe('xxxx test component', () => {
it('first test', async () => {
global.fetch = jest.fn(() => Promise.resolve(dummyjson));
const wrapper = shallow(<DemoApp />, { disableLifecycleMethods: true });
expect(wrapper.state('isLoaded')).toBe(false);
await wrapper.instance().loadPosts();
expect(wrapper.state('isLoaded')).toBe(true);
});
});

React 组件代码

        import React from 'react';
/* eslint class-methods-use-this: ['error', { 'exceptMethods': ['fetch'] }] */

export default class DemoApp extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
items: [],
};
}

componentDidMount() {
this.loadPosts().then(
(result) => {
this.setState({
isLoaded: true,
items: result,
});
},
(error) => {
this.setState({
isLoaded: true,
error,
});
},
);
}

loadPosts() {
return fetch('https://jsonplaceholder.typicode.com/posts')
.then(res => res.json()).then(result => result)
.catch(error => error);
}

render() {
const { error, isLoaded, items } = this.state;
if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
}
return (
<div>
{items.map(item => <div className="somecssclass"> {item.title} {item.title}</div>)}
</div>
);
}
}

下面是dummydata json

    [
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
{
"userId": 1,
"id": 2,
"title": "qui est esse",
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
}
]

即使我在 React 组件类文件中为 fetch 方法提供了以下异常,但我仍收到低于错误/警告的错误。/* eslint class-methods-use-this: ['error', { 'exceptMethods': ['fetch'] }] */

enter image description here

我们如何解决这个警告/错误?

非常感谢任何帮助。谢谢。

最佳答案

存在竞争条件。 loadPosts 是异步的,而 test 是同步的,没有 promise to chain 等待 fetch promise chain 完成。

控制流和测试方法存在问题。 loadPosts 需要返回一个 promise,所以它可以被链接起来:

  loadPosts() {
return fetch('https://jsonplaceholder.typicode.com/posts')...;
}

对其进行单元测试的一种正确方法是在一次测试中测试 loadPosts 并直接对其进行测试:

  it('...', async () => {
global.fetch = jest.fn(() => Promise.resolve(dummyjson));
const wrapper = shallow(<DemoApp />, { disableLifecycleMethods: true });
expect(wrapper.state('isLoaded').toBe(false);
await wrapper.instance().loadPosts();
expect(wrapper.state('isLoaded').toBe(true);
});

在另一个测试中,loadPosts 可以被 stub /模拟并断言它在 componentDidMount 中被调用。

另请注意,global.fetch = 一劳永逸地替换了它。最好用 jest.stub 模拟它。

关于javascript - 如何模拟 React Component 的功能并挂载组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52691292/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com