我想为我的react组件编写单元测试.我要测试的逻辑在UseEffect内部.请在下面找到代码 [英] I want to write unit test for my react component.The logic what i want to test is inside UseEffect.Please find the code below

问题描述

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

I make an axios POST request inside my useEffect and once value is received I update my link using setState. Therefore, I want to write a unit test for this business logic. Here is my code for the component.

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-testing-library和jest.

Here is my unit test code. I am using react-testing-library and jest.

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 hooks测试方法.

My test never updates the LoginUrl and always has the initial value. My assumption is that I am not writing the correct way of async testing or react hooks testing.

推荐答案

可能是因为您没有正确模拟 axios 模块.

It's probably because you didn't mock the axios module correctly.

无论如何，这是一个可以参考的工作示例:

Anyway, here is a working example you can refer to:

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

这篇关于我想为我的react组件编写单元测试.我要测试的逻辑在UseEffect内部.请在下面找到代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！