Javascript 在使用react测试库时，对不可重写实例进行分解的尝试无效

我正在尝试对我的React应用程序进行功能测试，我的组件有一个带有

数据testid=“btnHeaderCategory”

的div，单击该div，我必须更新主体的样式 我使用react和进行单元测试

我正在用

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 React，{useState}来自“React”；
常量Main=（）=>{
const[flag，updateFlag]=useState（false）；
常量getCategory=（）=>{
updateFlag（true）；
document.body.style.overflow=“隐藏”；
}
返回(
{标志？新类别：'}
)
}
导出默认主；

这是我的测试文件

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();

    });
})

从'@testing library/react'导入{render，firevent，cleanup，waitForElement}；
描述（“部件/主要部件”，（）=>{
让主；
以前（（）=>{
Main=require（'./Main'）。默认值；
});
毕竟（（）=>{
清理（）；
});
测试（“如果显示类别，则进行测试”，async（）=>{
常量{getByTestId}=render(
);
firevent.click（getByTestId（'btnHeaderCategory'）；
常量elem=getByTestId（'megaMenu'）；
expect（elem）.toBeInTheDocument（）；
});
})

当我尝试运行测试时，它会出现以下错误

TypeError:对不可重写实例进行分解的尝试无效


Jest配置


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',

    }),
  ],
}


var baseConfig={
收款人：[
“/***/.js”，
“！**/node_modules/**”，
“！/coverage/**”，
“！/jest.config.js”，
“！***/\uuuuu测试”，
],
覆盖率阈值：{
全球：{
声明：100，
分支机构：100，
功能：100，
行数：100，
},
},
};
module.exports={
…baseConfig，
collectCoverageFrom:[baseConfig.collectCoverageFrom'！/build/**'，
coverageReporters:['json'，'lcov'，'text'，'clover'，'html']，
覆盖率阈值：{
全球：{
报表：0.5，
分支机构：0.1，
功能：0.1，
行：0.5，
},
},
项目：[
创建项目({
displayName:'配置'，
testMatch:['/\\\\\\\\/***.js']，
测试环境：“节点”，
}),
创建项目({
displayName:'客户端'，
testMatch:['/client/***/\uuuuu tests\uuu/***.js']，
测试环境：“jsdom”，
}),
],
}
我刚试过，它对我很有效。。。您可以通过执行以下操作简化测试：

import*as React from'React'；
从'@testing library/react'导入{render，firevent}；
从“/Main”导入Main；
描述（'组件/主要'，（）=>{
测试（'显示类别时测试'，（）=>{
const{getByTestId}=render（）；
firevent.click（getByTestId（'btnHeaderCategory'）；
期望（getByTestId（'megaMenu'））.toBeDefined（）；//或在文档中
});
});

同样在
Main.js
上，我会避免将
“
作为子项放在div上，只需更改：
{flag&&newcategories}
，以及在
document.body
->
if（document.body）document.body.style.overflow='hidden'。。。因为它可能是
null
我刚刚尝试过，它对我很有效。。。您可以通过执行以下操作简化测试：

import*as React from'React'；
从'@testing library/react'导入{render，firevent}；
从“/Main”导入Main；
描述（'组件/主要'，（）=>{
测试（'显示类别时测试'，（）=>{
const{getByTestId}=render（）；
firevent.click（getByTestId（'btnHeaderCategory'）；
期望（getByTestId（'megaMenu'））.toBeDefined（）；//或在文档中
});
});

同样在
Main.js
上，我会避免将
“
作为子项放在div上，只需更改：
{flag&&newcategories}
，以及在
document.body
->
if（document.body）document.body.style.overflow='hidden'。。。因为它可能是
null
通过为
自定义挂钩提供上下文修复了此问题

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

在使用react测试库时，对不可重写实例进行分解的尝试无效

使用来自的
renderHook
修复了问题，我的测试用例现在运行良好

这是找我的钱

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

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

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

从'@context/global'导入GlobalProvider，{GlobalContext}；
const{globalState}=renderHook（（）=>useContext（GlobalContext））；
常量{getByTestId}=render(
,
);
通过为
自定义挂钩提供上下文解决了此问题

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

在使用react测试库时，对不可重写实例进行分解的尝试无效

使用来自的
renderHook
修复了问题，我的测试用例现在运行良好

这是找我的钱

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

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

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

从'@context/global'导入GlobalProvider，{GlobalContext}；
const{globalState}=renderHook（（）=>useContext（GlobalContext））；
常量{getByTestId}=render(
,
);
不为我工作可能是一些配置问题。不为我工作可能是一些
jest
配置问题。不为我工作可能是一些配置问题。不为我工作可能是一些
jest
配置问题。所以你不能在该函数中添加像useState这样的react钩子？所以你不能添加react函数中的useState之类的钩子？