标签: react-testing-library

我想知道如何使用 React 测试库和 Jest 测试间隔相关计时器在几次滴答后显示的内容。假设我们有这样的代码：

import React, { Component } from 'react';

let timer;

class Test extends Component {
    constructor() {
        super();
        this.state = {
            timeLeft: 60
        }
    }

    componentDidMount() {
        this.handleTick();
    }

    componentDidUpdate() {
        const { timeLeft } = this.state;
        if (!timeLeft) {
            clearInterval(timer);
            this.setState({
                timeLeft: 60,
            })
        }
    }

    handleTick() {
        timer = setInterval(() => {
            this.setState({timeLeft: this.state.timeLeft - 1 })
        },1000)
    }

    render() {
        return (
            <React.Fragment>
                <h3>I'm test.</h3>
                <h4>{this.state.timeLeft}</h4>
            </React.Fragment>
        )
    }
}

现在在测试中，我们想要检查测试组件是否在 15 秒后准确显示了我们想要的内容。我努力了： …

我知道我们可以使用 React 测试库来测试组件标签测试。但出于我的好奇心，我想知道有什么方法可以使用这个库对 React 组件进行端到端测试。

如果我能得到一些关于它的好信息，我将不胜感激。

我创建了一个名为 useCity 的自定义挂钩。它正在包装使用 useSWR 进行的 API 调用。

这是钩子的代码：

import useSWR from 'swr';

import { City } from '../interfaces';
import { BASE_URL } from '../../config';

interface CitiesResponse {
  data?: {
    records: {
      fields: {
        city: string;
        accentcity: string;
      }
    }[]
  },
  error?: {
    message: string;
  }
};

interface Props {
  start?: number;
  rows: number;
  query?: string;
  sort?: 'population';
  exclude?: string[];
}

const useCity = ({ start = 0, rows, query, sort, exclude }: Props) => {
  const params = [`start=${start}`, `rows=${rows}`]; …

我在单独的测试中在单个组件中测试不同的东西。我不想在每个单独的内部编写 render test，但是下面的代码不起作用。

我知道清理功能会在每次测试后清除渲染的组件，所以这很好。

import React from "react";
import { Router } from "react-router-dom";
import { render } from "@testing-library/react";
import "@testing-library/jest-dom";

import myComp from './myComp'

const renderComponent = () => {
  return render(<myComp />);
};

describe("desc", () => {
  beforeEach(() => {
   const {getAllByText, getByText, getByRole} = renderComponent()
  });

  test("1", () => {
      console.log(getAllByText) // not defined
  });

  test("2", () => {
      console.log(getAllByText) // not defined

  });

})

上面的设置会导致错误：

ReferenceError: getAllByText is not defined

renderComponent()我当前的解决方法是在 every 中包含函数调用 …

所以我对反应测试还很陌生。我有一个在组件内部调用的自定义挂钩。我正在使用renderHook中的方法react-hook-testing-library。

useEffect我需要测试是否调用自定义挂钩内的方法。我似乎无法弄清楚这一点。

在另一种情况下，我需要弄清楚是否trackPdpGtm没有被调用。

注意：该钩子不返回任何数据。这主要用于发送分析信息。

目前的方法：

使用PdpGtm.js

import { useEffect } from 'react';
import { trackPdpGtm } from 'utils/gtm/pdpGtmUtils';
import _ from 'utils/lodashImports';

export default function useGtmPdp(data = {}) {
  console.log('are you getting called?');
  const { relatedProducts, results, priceInfo, breadcrumbs } = data;
  const relatedProductsLoaded = _.get(relatedProducts, 'relatedProductsLoaded');
  useEffect(() => {
     if (relatedProductsLoaded) {
         trackPdpGtm(data);
     }
  }, [relatedProductsLoaded, results, priceInfo, breadcrumbs]);
}

我需要测试是否trackPdpGtm被调用。还需要检查它是否在另一个测试用例中没有被调用。

gtm.test.js

import { renderHook, cleanup, act } from …

我在我的应用程序中使用react-testing-library。通常，要检查输入是否在表单中，我们使用 getByLabelText。例如：

getByLabelText(/name/i)

但是如果我的输入没有任何标签怎么办？这是因为设计（UI）的原因，所以我无法为输入添加标签。如何检查表单中是否存在该输入？

我正在编写一个测试，以确保我的表单使用反应测试库提交，并且我还使用反应挂钩表单。我的提交方法在我的测试中无法调用。当此测试运行时，我收到以下错误：

\xe2\x97\x8f reset password should send\n\n    expect(jest.fn()).toHaveBeenCalled()\n\n    Expected number of calls: >= 1\n    Received number of calls:    0\n

有人可以解释我做错了什么吗？

我的组件

const ResetPassword = () => {\n    const { handleSubmit } = useForm();\n\n    const onSubmit = (resetFormData: { email: string }) => {\n        const { email } = resetFormData;\n        // sends email using external API\n    };\n\n    return (\n            <form onSubmit={handleSubmit(onSubmit)}>\n                <input\n                    name="email"\n                    type="text"\n                    placeholder="Email Address"\n                />\n                <button type="submit">\n                    Send Email\n                </button>\n            </form>\n    );\n};\n\nexport default ResetPassword;\n

我的测试文件 …

我有一个组件需要像这样将状态传递到其中，以便该组件可以更改其父级中的状态。我只是使用 React 测试库，不使用 Enzyme，而是使用 Jest。

const [open, setOpen] = useState<boolean>(false);
<Toggle value={open} setValue={setOpen} onText='Open' offtext='Closed' />

以及组件本身

import React, { Dispatch, SetStateAction } from 'react';

interface PropsShape {
  value: boolean;
  setValue: Dispatch<SetStateAction<boolean>>;
  onText: string;
  offtext: string;
}


function Toggle({ value, setValue, onText, offtext }: PropsShape) {
  return (
    <div className='Toggle'>
      <div
        className='Toggle--slider'
        onClick={() => setValue(!value)}
        data-testid='click'
      >
        <div className={value ? 'on' : 'off'}></div>
      </div>
      <div className='Toggle--label'>{value ? onText : offtext}</div>
    </div>
  );
}

export { Toggle };

这是我想做的测试

import { …

我正在尝试测试一个简单的减速器，其日期属性设置为今天。

const today = new Date();

export const initialState = {
  today
};

console.log(new Date().toDateString()); // <--- real date

export default function globalReducer(state = initialState, action) {
  console.log(new Date().toDateString()); // <--- mocked date
  switch (action.type) {
    default:
      return state;
  }
}

通过我的基本测试

import globalReducer from "./reducer";

describe("Global reducer", () => {
  beforeAll(() => {
    jest.useFakeTimers("modern");
    jest.setSystemTime(new Date("2021-02-18"));
  });

  afterAll(() => {
    jest.useRealTimers();
  });

  it("should return the mocked date", () => {
    expect(globalReducer(undefined, {}).today).toEqual(new Date('2021-02-18'));
  });
});

我注意到，模拟仅在减速器代码内起作用，但今天在其全局范围内总是返回真实日期而不是模拟日期。

setSystemTime如果我在测试设置文件中调用，则被today …

我有一个页面，其中加载了一个下拉组件。该组件调用一个自定义钩子，该钩子使用反应查询来获取要在下拉列表中显示的数据。初始加载时，该组件处于加载状态并呈现加载图标。当react-query成功完成调用时，组件将数据列表呈现到下拉列表中。

const SelectItem = ({ handleSelectChange, selectedItem }) => {
  
  const { data, status } = useGetData(url, 'myQueryKey');

  if (status === 'loading') {
    return <RenderSkeleton />;
  }

  if (status === 'error') {
    return 'An Error has occured';
  }

  return (
    <>
      <Autocomplete
        options={data}
        getOptionLabel={(option) => `${option.name}`}
        value={selectedItem}
        onChange={(event, newValue) => {
          handleSelectChange(newValue);
        }}
        data-testid="select-data"
        renderInput={(params) => <TextField {...params}" />}
      />
    </>
  );
};

我如何正确测试这个？即使在实现 msw 来模拟响应数据之后，我的测试也仅呈现骨架组件。所以我假设它基本上只等待“isLoading”状态。

it('should load A Selectbox data', async () => {
  render(
    <QueryClientProvider client={queryClient}> …