酶安装不调用useEffect;react-testing-library渲染不调用useEffect

我正在尝试用酶的坐骑测试React钩子。看起来 React 钩子 useEffect 没有被调用。

这是我的功能组件：

export function HelloFetch() {
type HelloData = { Message: any }
const initialHelloData : HelloData = { Message: "" };
const url = `https://localhost:1000/api/hello`;
const [helloData, setHelloData] = useState(initialHelloData);
useEffect(() => {
fetch(
url,
{
method: "GET"
}
)
.then(res  => res.json() )
.then(response => {
setHelloData(response)
console.log(response)
})
. catch(error => console.error(error));
});
return (
<div>
<div>
<p>Fetch: </p>{helloData.Message}
</div>
</div>
);
}

api 应该返回"hello， world"，它在邮递员中就是这样做的。它在浏览器中看起来也不错。

{"Message":"Hello, world"}

这是我的测试代码：

describe('Hello', () => {
const helloFetchComponent = mount(<HelloFetch />);
it(' using fetch api should contain "Hello, world"', () => {
expect(helloFetchComponent.html()).toContain("Hello, world");
});
}

我收到此错误：

Expected substring: "Hello, world"
Received string:    "<div><div><p>Fetch: </p></div></div>"

我尝试使用反应测试库的渲染方法对其进行测试。

test('renders hello world app', () => {
const { getByText } = render(
<HelloFetch />
);
expect(getByText('Hello')).toBeInTheDocument();
});

这是我得到的错误：

renders hello world app
Unable to find an element with the text: Hello. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
<body>
<div>
<div>
<div>
<p>
Fetch:
</p>
</div>
</div>
</div>
</body>

我不确定我错过了什么。

编辑：将我的评论重新发布到此处@Florian以获得更好的格式。

我从获取切换到 axios。我有以下几点：

describe('Hello', () => { 
it(' using axios should contain "mock Hello, world"', () => { 
const mock = new MockAdapter(axios); 
const mockData : HelloData = { Message: "mock Hello, world"}; 
mock.onGet(helloUrl).reply(200, mockData); 
let component = mount(<HelloAxios />); 
expect(component.html()).toContain("mock Hello, world"); 
}) 
})

该组件不包含来自 api 的数据，即使 api 工作正常也是如此。

以下方法确实有效：

axios.get(helloUrl).then(function (response) { 
expect(response.data.html()).toContain("mock Hello, world"); 
});

我不知道如何mount与MockAdapter一起工作.

Fetch 在 Node 中不可用，Jest 在其中执行测试。

你不应该尝试在你的单元测试中进行真正的HTTP调用，你应该用Jest很棒的工具来模拟它们：https://jestjs.io/docs/en/mock-functions.html

或者你也可以使用 https://github.com/jefflau/jest-fetch-mock。

模拟负责 API 调用的函数：

import * as ModuleExportingAsyncFunction from 'ModuleExportingAsyncFunction'
const mockedThings = [{...}, {...}];
jest.spyOn(ModuleExportingAsyncFunction, 'getThingsReturnPromise').mockReturnValue(Promise.resolve(mockedThings));
// no more real HTTP calls !

相关内容

最新更新

热门标签：