使用反应测试库时尝试解构不可迭代实例无效

Question

我正在尝试对我的 React 应用程序进行功能测试，我的组件有一个带有data-testid="btnHeaderCategory"的 div，单击该 div 我必须更新我正在使用的主体样式 react 和react 测试库单元测试。

我正在用document.body.style.overflow = "hidden";更新 body 的样式document.body.style.overflow = "hidden";

这是我的组件

import React, {useState} from "react";

const Main = () => { 
    const [flag, updateFlag] = useState(false);
    const getCategory = () => {
        updateFlag(true);
        document.body.style.overflow = "hidden";
    }
    return(
        <div onClick={getCategory} data-testid="btnHeaderCategory">
            {flag ? <div data-testid="megaMenu" > New categories </div> : ""}
        </div>
    )
}

export default Main;

这是我的测试文件

import { render, fireEvent, cleanup, waitForElement } from '@testing-library/react';

describe("components/Main",()=>{
    let Main;

    beforeAll(()=>{
      Main = require('./Main').default;

    });
    afterAll(() => {
      cleanup();
    });
    test("Test if categories shown", async()=>{

      const { getByTestId } = render(
        <Main />
      );
      fireEvent.click(getByTestId('btnHeaderCategory'));
      const elem = getByTestId('megaMenu'));
      expect(elem).toBeInTheDocument();

    });
})

当我尝试运行测试时，它因以下错误而中断

类型错误：无效的解构不可迭代实例的尝试

玩笑配置

var baseConfig = {
   collectCoverageFrom: [
    '<rootDir>/**/*.js',
    '!**/node_modules/**',
    '!<rootDir>/coverage/**',
    '!<rootDir>/jest.config.js',
    '!**/__tests__/**',
  ],
  coverageThreshold: {
    global: {
      statements: 100,
      branches: 100,
      functions: 100,
      lines: 100,
    },
  },
};

module.exports = {
  ...baseConfig,
  collectCoverageFrom: [baseConfig.collectCoverageFrom, '!<rootDir>/build/**'],
  coverageReporters: ['json', 'lcov', 'text', 'clover', 'html'],
  coverageThreshold: {
    global: {
      statements: 0.5,
      branches: 0.1,
      functions: 0.1,
      lines: 0.5,
    },
  },
  projects: [
    createProject({
      displayName: 'Configuration',
      testMatch: ['<rootDir>/__tests__/**/*.js'],
      testEnvironment: 'node',
    }),
    createProject({

      displayName: 'Client',
      testMatch: ['<rootDir>/client/**/__tests__/**/*.js'],
      testEnvironment: 'jsdom',

    }),
  ],
}

Answer 1

我刚刚尝试过，它对我有用……您可以通过执行以下操作来简化测试：

import * as React from 'react';
import { render, fireEvent } from '@testing-library/react';

import Main from './Main';

describe('components/Main', () => {
  test('Test if categories shown', () => {
    const { getByTestId } = render(<Main />);

    fireEvent.click(getByTestId('btnHeaderCategory'));
    expect(getByTestId('megaMenu')).toBeDefined(); //Or to be in the document
  });
});

同样在Main.js我会避免将""作为孩子放在 div 上，只需更改： {flag && <div data-testid="megaMenu" > New categories </div>} ，以及添加空检查document.body -> if (document.body) document.body.style.overflow = 'hidden'; ...因为它可能是null 。

Answer 2

通过为custom hook提供上下文来解决此问题

我在我的主要组件中使用了一个 react 自定义钩子，它破坏了测试并且错误消息是错误的，这让我感到困惑。

使用反应测试库时尝试解构不可迭代实例无效

使用react-hooks-testing-library 中的renderHook解决了这个问题，我的测试用例现在工作正常。

这是我的改变

import GlobalProvider, { GlobalContext } from '@context/global';

const { globalState } = renderHook(() => useContext(GlobalContext));

const { getByTestId } = render(
    <GlobalProvider value={globalState}>
      <Main />
    </GlobalProvider>,
);