我想为我的react组件编写单元测试.我想测试的逻辑在UseEffect内部.请找到下面的代码

Question

我在useEffect内发出axiosPOST请求，一旦收到值，我就会使用setState更新链接。因此，我想为这个业务逻辑编写一个单元测试。这是我的组件代码。

export function Login() {
const browserUrl = window.location.href;
const [LoginUrl, setLoginUrl] = useState<string>('');
useEffect(() => {
const response = axios.post<LoginUrl>('https://somedomain/getLoginUrl', {
data: browserUrl,
});
response.then((res: LoginUrl) => {
setLoginUrl(res.LoginUrl);
});
}, []);
return (
<>
<LoginLink data-testid="getUrl" href={LoginUrl} style={{ cursor: 'pointer' }}>
LogIN
</LoginLink>
</>
);
}

这是我的单元测试代码。我正在使用react测试库和笑话。

it('should display loginurl', async () => {
const { getByTestId } = render(<Login />);
axiosMock.post('https://somedomain/getLoginUrl', { data: 'abcgd' }).then(() => {
res: 'asxed';
});
const url = await waitFor(() => getByTestId('show-data'));
expect(url.getAttribute('href')).toEqual('asxed');
});

我的测试从不更新LoginUrl，并且始终具有初始值。我的假设是，我没有以正确的方式编写async测试或react hook测试。

Answer 1

这可能是因为您没有正确地模拟axios模块。

无论如何，这里有一个可以参考的工作示例：

Login.tsx:

import React from 'react';
import axios from 'axios';
import { useEffect, useState } from 'react';
import { LoginLink } from './LoginLink';
type LoginUrl = any;
export function Login() {
const browserUrl = window.location.href;
const [LoginUrl, setLoginUrl] = useState<string>('');
useEffect(() => {
const response = axios.post<LoginUrl>('https://somedomain/getLoginUrl', {
data: browserUrl,
});
response.then((res: LoginUrl) => {
setLoginUrl(res.LoginUrl);
});
}, []);
return (
<>
<LoginLink data-testid="getUrl" href={LoginUrl} style={{ cursor: 'pointer' }}>
LogIN
</LoginLink>
</>
);
}

LoginLink.tsx:

import React from 'react';
export const LoginLink = (props) => {
return <a {...props}></a>;
};

Login.test.tsx:

import React from 'react';
import { render, waitFor } from '@testing-library/react';
import { Login } from './Login';
import axios from 'axios';
describe('65336283', () => {
it('should display loginurl', async () => {
const postSpy = jest.spyOn(axios, 'post').mockResolvedValueOnce({ LoginUrl: 'asxed' });
const { getByTestId } = render(<Login />);
expect(getByTestId('getUrl').getAttribute('href')).toEqual('');
const url = await waitFor(() => getByTestId('getUrl'));
expect(postSpy).toBeCalledWith('https://somedomain/getLoginUrl', { data: 'http://localhost/' });
expect(url.getAttribute('href')).toEqual('asxed');
postSpy.mockRestore();
});
});

测试结果：

PASS  examples/65336283/LoginLink.test.tsx
65336283
✓ should display loginurl (23 ms)
---------------|---------|----------|---------|---------|-------------------
File           | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
---------------|---------|----------|---------|---------|-------------------
All files      |     100 |      100 |     100 |     100 |                   
Login.tsx     |     100 |      100 |     100 |     100 |                   
LoginLink.tsx |     100 |      100 |     100 |     100 |                   
---------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.967 s