标签: react-testing-library

这是一个关于在规范中使用 React refs 的问题。具体来说，我在浏览器中看到的行为与在测试中运行时看到的行为不同。

// app_container.test.js

import React from 'react'
import ReactDOM from 'react-dom'
import AppContainer from "./app_container"
import { render, fireEvent, waitForElement, cleanup, wait } from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect'
import axiosMock from 'axios'

import { useAsync } from "react-use"

afterEach(cleanup);

test("renders", () => {
  const { getByTestId } = render(<AppContainer />);
  expect(getByTestId("app-container")).toHaveClass("app-container");

});


test("when mounted, it loads the rings", async () => {
  jest.setTimeout(15000);

  const { getByTestId } = render(<AppContainer />);

  const container = getByTestId('app-container')

  await wait(() => expect(getByText("Abc")).toBeInTheDocument()); …

我尝试用 TDD 视图编写代码，我一直遇到同样的问题，我应该测试什么，不应该测试什么，目标是使用 TDD 制作一个基于 React-bootstrap 的导航栏，我的组件将只是一个具有较少属性的包装器，以使其变得简单，我从react-bootstrap中Navbar的品牌子组件开始。最终目标是测试反映用户应该测试的内容，例如导航中存在具有良好 src 和 alt 属性的品牌徽标 img。

这些测试有趣还是应该避免？

我的测试

import React from 'react';
import { render } from '@testing-library/react';
import BrandNav from './BrandNav';

test('testing brand navigation', () => {
    const altProp = 'message to show if image unavailable',
        srcProp = 'relativeFilePath',
        host = window.location;

    const { getByAltText } = render(<BrandNav alt={altProp} src={srcProp} />);

    const brandLogo = getByAltText(altProp);
    expect(brandLogo.src).toEqual(`${host}${srcProp}`);
});

我的组件

import React from 'react';
import { Navbar } from 'react-bootstrap';

const BrandNav = ({ alt, …

我想用react-testing-library测试我的api 并且我从一个名为 apiClient.ts 的文件中导出由 axios.create 创建的实例

import axios from 'axios'

const apiClient = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
  responseType: 'json',
  headers: {
    'Content-Type': 'application/json',
  },
})

export default apiClient

然后在 users.ts fetchUsersApi 中使用我从 apiClient 获取的 axios 实例

import apiClient from './apiClient'

export interface ITrader {
  id: number
  name: string
  username: string
  email: string
  address: any
  phone: string
  website: string
  company: any
}

export const fetchTradersApi = async (): Promise<ITrader[]> => {
  const response = await apiClient.get<ITrader[]>('/users')
  return response.data
}

我创建了一个 …

您好，我正在为其中包含 redux 的组件编写单元测试。在测试它时，抛出错误 UseSelector state undefined。UseSelector 将在收到 api 响应后更新一次。直到它的值是未定义的。但是，在进行单元测试时，它会在第一个本身上引发错误。如何克服这个问题。

测试文件

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { act } from 'react-dom/test-utils';
import '@testing-library/jest-dom/extend-expect';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import LinkApplication from '../index';
import {reducer} from '../../../redux/summary/reducer';
let INITIAL_STATES = {
    isFetching: false,
    errorMessage: "",
    requestExtensionErrorMessage: "",
    requestExtensionSuccessMessage: "",
    linkApplicationSuccess: "",
    linkApplicationFailure: null,
    linkLoanSuccessMessage: "",
    linkLoanErrorMessage: "",
    LinkApplicationErrorMessage:"",
  };
function renderWithRedux(
  component,
  { INITIAL_STATES, store = createStore(reducer, INITIAL_STATES) …

许多人似乎都经历过这个问题的某个版本，但之前的解决方案似乎都不适合我。我的应用程序是使用 CRA 和 React Native Web 构建的。我正在测试基于 React Native 的 View 的组件的点击行为。我尝试从“@testing-library/react-native”导入 { fireEvent }，因为来自 @testing-library/react 的 fireEvent 不起作用，但它会抛出此错误：ReferenceError：DEV未定义

包.json

{
  "name": "writual",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.12.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.27",
    "@fortawesome/free-solid-svg-icons": "^5.12.1",
    "@fortawesome/react-fontawesome": "^0.1.8",
    "@n8tb1t/use-scroll-position": "^1.0.43",
    "@react-mock/localstorage": "^0.1.2",
    "@react-native-community/masked-view": "^0.1.7",
    "@react-pdf/renderer": "^1.6.8",
    "aphrodite": "^2.4.0",
    "babelify": "^10.0.0",
    "blob-stream": "^0.1.3",
    "browserify": "^16.5.0",
    "draft-js": "^0.11.4",
    "draft-js-plugins-editor": "^3.0.0",
    "draft-js-static-toolbar-plugin": "^3.0.1",
    "expo": "^36.0.2",
    "expo-cli": "^3.11.9",
    "firebase": "^7.9.1",
    "g": "^2.0.1",
    "lodash.debounce": "^4.0.8",
    "mutationobserver-shim": "^0.3.7",
    "pdfkit": "^0.10.0",
    "react": "^16.13.1",
    "react-art": "^16.12.0",
    "react-dom": …

使用 jest 和 React 测试库。

这看起来很基本，但我却错过了它。如何模拟子组件，但测试父组件是否使用正确的 props 调用它？在本例中，我想测试parent.js并模拟子组件。

父.js

import Child from './child'
const Parent = (props) => {
  const {firstname} = props;

  <Child name={firstname} />
}

测试.js

import Parent from '../parent'
jest.mock('./child');

it('should render properly'), () => {
   render(<Parent firstname='bob'/>);
   expect('child').toBeCalledWith({ name: 'bob' });
}

我想使用 Jest 为我的 Api 文件编写测试用例。它使用 Next.js。我尝试了很多方法，但无法获得任何文件覆盖率。

ApiFile.js

const axios = require('axios');
import getConfig from 'next/config';

export default async (req, res) => {
  const {query: { param }} = req;
  const response = await customerInfo(param);

  if (!response.data || response.data == null) 
    res.status(200).send({ data: [], status: response.status});
  else
    res.status(200).send({ data: response.data.results, status: response.status });
};
async function customerInfo(params) {
    const { serverRuntimeConfig } = getConfig();
    const URL = serverRuntimeConfig.API;
    const config = {
      timeout: 15000,
      headers: {
        'content-type': 'application/json'
      },
    };
    const …

如果我们将 jest 与 typescript 一起使用，其中使用了相交观察器，则相交观察器的模拟将变得困难。到目前为止我处于：

beforeEach(() => {
  // IntersectionObserver isn't available in test environment
  const mockIntersectionObserver = class {
    observe() {
      console.log(this);
    }

    unobserve() {
      console.log(this);
    }

    disconnect() {
      console.log(this);
    }

    root = null

    rootMargin = '0'

    thresholds=[1]

    takeRecords=() => ([{
      isIntersecting: true,
      boundingClientRect: true,
      intersectionRatio: true,
      intersectionRect: true,
      rootBounds: true,
      target: true,
       time: true,
    }])
  };
  window.IntersectionObserver = mockIntersectionObserver;
});

但这仍然会引发错误，例如：

Type 'typeof mockIntersectionObserver' is not assignable to type '{ new (callback: IntersectionObserverCallback, options?: IntersectionObserverInit | undefined): IntersectionObserver; …

目前，我正在尝试对我的应用程序进行单元测试，该应用程序是使用 Create-React-App 和 typescript 构建的，并且它的样式是 chakraui。Chakrui 包含一个组件 ThemeProvider，它必须将整个应用程序包装起来。

这是我的 index.tsx 文件

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { ThemeProvider, CSSReset } from "@chakra-ui/core/dist";
import { theme } from "@chakra-ui/core/dist";

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <CSSReset />
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById("root")

对于我编写的每个单元测试，我必须使用 ThemeProvider 包装组件才能通过测试：

import React from "react";
import { render } from "@testing-library/react";
import { ThemeProvider } from "@chakra-ui/core/dist";

import App from "./App";

describe("<App />", …

当我运行纱线测试或纱线测试[文件名]时，我的所有组件都通过了测试。但是，当我使用 --coverage 标志运行测试时，出现以下错误，指向我创建的自定义渲染函数的包装器。自定义渲染函数或多或少是从react-testing-library文档中复制/粘贴的：https://testing-library.com/docs/react-testing-library/setup

到目前为止，我尝试过的以下命令均无效：yarn test --coverage、yarn test --coverage --watchAll=false、yarn test --collectCoverage、npm run test --coverage、npm run test --coverage --全部观看=假

错误：

Error: Uncaught [Error: Wrapper(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.]

  82 |              );
  83 |      };
> 84 |      return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
     |             ^
  85 | };
  86 | 
  87 | const render = (ui: ReactElement, { store = createStore(appReducer, initialState as AppApiStore), …