如何将Jest添加到Parcel.js内置的React应用程序
Jest是一个流行的JavaScript测试框架，用于测试React应用程序。Parcel.js是一个零配置的打包工具，用于构建React应用程序。将Jest添加到Parcel.js内置的React应用程序可以帮助我们进行单元测试和集成测试，以确保应用程序的质量和稳定性。
以下是将Jest添加到Parcel.js内置的React应用程序的步骤：
- 首先，确保你的项目中已经安装了Parcel.js和React。如果没有安装，可以使用以下命令进行安装：
npm install -g parcel-bundler
npm install react react-dom
- 在项目根目录下创建一个新的文件夹，命名为
__tests__，用于存放测试文件。 - 在
__tests__文件夹中创建一个新的测试文件，命名为App.test.js（假设你要测试的组件是App.js）。 - 在
App.test.js文件中，引入React和所需的测试工具：
import React from 'react';
import { render } from '@testing-library/react';
import App from '../App';
- 编写测试用例，例如：
test('renders app component', () => {
render(<App />); // 添加断言语句，验证组件是否正确渲染});
- 在项目的
package.json文件中，添加一个新的脚本命令，用于运行测试：
"scripts": {
"test": "jest"}
- 运行测试命令，执行测试：
npm test
Jest将会运行__tests__文件夹中的所有测试文件，并输出测试结果。
这样，你就成功地将Jest添加到Parcel.js内置的React应用程序中，可以使用Jest进行单元测试和集成测试。Jest提供了丰富的断言和测试工具，可以帮助你编写全面的测试用例，确保应用程序的正确性和稳定性。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
1回答
运行npm test时在服务器文件夹下运行test.js的方法
javascript、node.js、reactjs、unit-testing、jestjs
每当我运行npm test并输入'a‘来运行应用程序中的所有测试用例时，它只扫描app/src/component下的__tests__文件夹。我在app/server/service下有一个__tests__文件夹，似乎没有检测到。
有没有办法将jest环境配置为包含整个项目目录(或至少是app/__tests__)中的所有服务器文件夹，以便在一次运行中运行单元测试用例？
谢谢你的帮助
浏览 1提问于2019-06-14得票数 0
1回答
测试用酶和玩笑做出反应，错误不能从'index.js‘中找到模块'@babel/polyfill/lib/noConflict’
reactjs、unit-testing、jestjs、enzyme
我对单元测试很陌生，我刚刚开始为我的react项目编写单元测试。我的项目是使用创建-反应-应用程序创建的，我已经安装了所需的测试库，如酶、酶适配器-Reacti-16和jest-酶。
我在src目录中创建了一个新文件setupTests.js，并添加了酶配置。
当我试图使用命令npm test运行单元测试时，我收到了下面的错误，因此我的测试失败了。
src/App.test.js
● Test suite failed to run
Cannot find module '@babel/polyfill/lib/noConflict' from 'index.js&#
浏览 1提问于2020-09-17得票数 0
回答已采纳
2回答
使用create app为React应用程序配置Jest和酶类
reactjs、jestjs、create-react-app、enzyme
我已经构建了一个使用CRA (CRA)的示例React应用程序，我正在尝试为应用程序编写单元测试。
使用Jest和酶类，我已经将所需的包安装为dev依赖项。
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
"jest": "^24.9.0"
jest.config.js -位于 of src文件夹外的
module.exports = {
verbose: true,
setupFilesA
浏览 8提问于2019-11-28得票数 0
1回答
Jest无法从同一文件夹中的文件中找到模块
reactjs、jestjs
我正在尝试用Jest设置一个非常基本的测试，用于测试App.js是否正确呈现。我得到了错误
Cannot find module './App' from 'App.test.js'
However, Jest was able to find:
'./App.js'
'./App.test.js'
但是，如果我尝试编写import App from "./App.js";而不是... from "./App";，我会得到
Cannot find modul
浏览 0提问于2019-07-15得票数 0
1回答
Mocha意外标识符
javascript、reactjs、mocha.js、babeljs
我想建立一个测试环境，我的反应应用程序使用Mocha+chai+enzyme，问题是，许多东西是缺少的，我不知道如何解决，因为我是一个初学者，当涉及到使用巴贝尔或webpack……等
因此，首先，我有一个项目，我创建了一个用created app创建的项目，我用npm安装了所有的库，我们已经有了一个默认的app.test.js文件，所以我更改了代码。
我的package.json：
{
"name": "****",
"version": "0.1.0",
"private": true,
"
浏览 0提问于2019-02-13得票数 2
1回答
现有React +Web应用程序的意外令牌- Jest
javascript、unit-testing、reactjs、webpack、jestjs
我有一个简单的反应应用程序。我正在尝试将Jest( react的测试框架)配置到我现有的react应用程序中。当我试图从npm测试中运行测试用例时，它会给出以下错误：
> openmrs-owa-built-in-reports@0.1.0 test D:\OpenMRS\OWA\openmrs-owa-built-in-reports
> jest
FAIL app\js\__tests__\reports\common\ReportAsTableView.test.js
● Test suite failed to run
D:/OpenMRS/OWA/op
浏览 4提问于2017-07-28得票数 2
回答已采纳
3回答
使用jest vs react-scripts测试
reactjs、jestjs
js和react newbie...playing以及测试框架……下面是代码：
import React from 'react';
// import CheckboxWithLabel from '../CheckboxWithLabel';
import {shallow} from 'enzyme'; //not installed...
//var x = require ('../CheckboxWithLabel.js');
test('CheckboxWithLa
浏览 1提问于2018-11-15得票数 15
回答已采纳
1回答
创建找不到测试
regex、reactjs、testing、jestjs、create-react-app
我最近开始了一个新的项目，使用创建-反应-应用程序。我将App.test.js从/src文件夹外部移到根级/tests文件夹，因此我的文件夹结构现在如下所示：
> node_modules
> public
> src
...
App.js
> tests
App.test.js
...
下面是整个App.test.js文件：
import React from 'react';
import ReactDOM from 'react-dom';
import App from "../src/App";
浏览 1提问于2018-04-01得票数 11
31回答
如何使用Jest测试单个文件？
node.js、jestjs
我可以使用Jest测试多个文件，但我不知道如何测试单个文件。
我有：
运行npm install jest-cli --save-dev
更新的package.json：{.“脚本”：{“测试”："jest“}.}
写了很多测试。
运行npm test按预期工作(目前它运行14个测试)。
如何测试单个文件，例如测试app/foo/__tests__/bar.spec.js
我尝试过运行npm test app/foo/__tests__/bar.spec.js (从项目根)，但是我得到了以下错误：
国家预防机制错误！错误: ENOENT，打开'/node_
浏览 27提问于2015-02-25得票数 721
回答已采纳
2回答
如何测试一个组件在React中呈现了多少次？
javascript、reactjs
我有一个包含两个组件的场景：
应用程序
人民
我想测试人们是否在应用程序中被渲染了10次。所以，我试着用Jest来测试它。到目前为止，我在我的src/App.test.js上做了这个
import React, { Component } from "react";
import People from "./components/People";
import App from './App';
test('Total people = 10', () => {
expect(App).find(
浏览 0提问于2020-10-03得票数 1
回答已采纳
1回答
SyntaxError:反应中酶和Jest浅渲染中的意外标记“<”
javascript、reactjs、jestjs、enzyme、babel-jest
我在我的React应用程序中运行带有jest和酶类的测试，虽然我的简单的理智检查测试(2+2 expect 4)可以工作，但是当我转到浅层渲染组件时，会引发这个错误。当我试图用shallow()替换render()时，它也会抛出。
Projects\MyProject\__tests__\app.test.js:17
const wrapper = (0, _enzyme.shallow)(<_App.App />);
^
SyntaxError: Unexpecte
浏览 2提问于2021-01-19得票数 2
回答已采纳
我正在使用Jest测试框架为我的JavaScript/ React JS应用程序编写单元测试。当我运行我的测试时，我得到了以下错误。 ● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel c
浏览 234提问于2021-04-20得票数 0
1回答
在测试运行期间隐藏编译警告
reactjs、visual-studio-code、jestjs
我们正在用vscode构建一个react应用程序，使用jest运行单元测试。
当我们运行测试时，我们看到的是node_modules中文件的编译器警告。
PASS src/components/Common/IonicWrappers/__tests__/KorSelect.test.tsx
PASS src/components/Common/IonicWrappers/__tests__/KorHeader.test.tsx
● Console
console.warn node_modules/react-dom/cjs/react-dom.development.js:11494
浏览 0提问于2019-08-28得票数 4
回答已采纳
1回答
当我尝试使用Jest运行RangeError测试时，为什么要得到“FrisbyJS :最大调用堆栈大小超过”？
javascript、api-testing、jasmine
当我尝试使用github页面上记录的jest运行frisbyjs测试时，我会得到以下错误：
RangeError: Maximum call stack size exceeded
at String.slice (native)
at Object.resolve (path.js:290:29)
at resolveConfigPathByTraversing (C:\Users\me\AppData\Roaming\npm\node_modules\jest\node_modules\jest-config\build\resolve_config_path.js
浏览 0提问于2017-09-21得票数 0
回答已采纳
1回答
React和Jest的Sonarqube覆盖配置
reactjs、sonarqube、jestjs、sonarjs
我有问题的配置声纳正确地工作与React + Jest。
我的配置：
my_moudle.sonar.projectBaseDir=front_app my_module.sonar.javascript.file.suffixes=.js,.jsx
my_module.sonar.tests=src
my_module.sonar.test.inclusions=**/__tests__/** my_module.sonar.javascript.lcov.reportPaths=coverage/lcov.info
目前，我将src文件夹指向测试文件夹，因为我在同一个项目文件夹中为测试文件
浏览 2提问于2018-08-02得票数 15
3回答
在0.57更新:无法找到预置模块:metro- React本机-babel-预设“”相对于目录
typescript、react-native、babeljs、jestjs、enzyme
如果在新的React版本0.57和TypeScript中将测试与Jest和酶集成，它们将无法工作。以下是复制的步骤：
创建一个新的React本机项目：
react-native init MyApp -package "com.my.app" --template typescript && node MyApp/setup.js
安装所有与Jest和Enzyne相关的软件包：
npm install --save-dev react-dom enzyme enzyme-react-adapter-16 jest-fetch-mock ts-jest
添加jes
浏览 0提问于2018-09-15得票数 17
回答已采纳
1回答
扩展Jest配置
jestjs、create-react-app、aws-amplify、ts-jest
我需要在AWS amplify中为创建react应用程序设置构建管道。我找不到代码片段来添加使用Jest和React测试库和typescript的单元测试。你能分享一下有jest单元测试的amplify.yml吗？我在下面试过了
version: 1
frontend:
phases:
preBuild:
commands: ['npm ci']
build:
commands: 'npm run test' && 'npm run build'
浏览 0提问于2020-11-16得票数 0
1回答
Jest单元测试-没有发现测试
javascript、unit-testing、jestjs
我从Jest单元测试开始。在运行一个jest单元测试时，我一直得到“没有测试发现”。
错误描述
yarn test
yarn run v1.3.2
$ jest
No tests found
In E:\Course\Testing JavaScript\Jest Demo
4 files checked.
testMatch: **/__tests__/**/*.js?(x),**/?(*.)(spec|test).js?(x) - 3 matches
testPathIgnorePatterns: \\node_modul
浏览 0提问于2018-03-31得票数 4
回答已采纳
7回答
怎么导出腾讯云服务器镜像并下载到本地？
导出的镜像，我能在本地环境正常使用么，我想把这个镜像再安装到我本地的电脑上，请问这个操作是都能成功
浏览 14591提问于2020-08-03
5回答
使用Jest模拟时无法找到模块“NativeAnimatedHelper”
react-native、jestjs、react-navigation
我一直在尝试在我的新反应本地应用程序设置react-navigation。虽然代码/屏幕可以正常工作，但是Jest通过遵循在库中添加了一些问题。
我安装了react-navigation、react-native-reanimated、react-native-gesture-handler和react-native-screens@^1.0.0-alpha.23。然后我进入ios文件夹并运行pod install。因为我在“反应本地人”的第0.61节，他们应该是自动收费的。
当我运行默认Jest测试时，会得到一个错误，如下所示：
✓ renders correctly (106ms)
浏览 1提问于2019-10-06得票数 10
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
