React Testing Library - Global configuration - jestjs

I need to override default testID attribute in React Testing Library. Using Jest as a testing framework.
For this, I have followed the steps given here at individual test file level.
Is there any way to have this configuration at global (project) level, so that all the test files in the project will adhere to such custom configuration and will not have need to define custom configuration explicitly at test file level?

If using jest you can add the following in file
import { configure } from 'react-testing-library';
configure({
testIdAttribute: 'data-my-test-id',
});
and include that file in the jest.config.js file in the setupFiles property
setupFiles: [
'<rootDir>/path-to-your-configuration-file.js',
]

https://testing-library.com/docs/dom-testing-library/api-configuration/#introduction
import {configure} from '#testing-library/dom'
configure({
testIdAttribute: 'data-my-test-id',
})

Related

Jest encountered an unexpected token #3746

error when try run test
● Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its
dependencies use non-standard JavaScript syntax, or when Jest is not
configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform
your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
Here's what you can do: • If you are trying to use ECMAScript
Modules, see https://jestjs.io/docs/ecmascript-modules for how to
enable it. • If you are trying to use TypeScript, see
https://jestjs.io/docs/getting-started#using-typescript • To have
some of your "node_modules" files transformed, you can specify a
custom "transformIgnorePatterns" in your config. • If you need a
custom transformation specify a "transform" option in your config. •
If you simply want to mock your non-JS modules (e.g. binary assets)
you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the
docs: https://jestjs.io/docs/configuration For information about
custom transformations, see:
https://jestjs.io/docs/code-transformation
Details:
D:#workspace\monotest\packages\one\build\index.js:1
({"Object.":function(module,exports,require,__dirname,__filename,jest){import
{ v4 as uuid } from 'uuid'; Additional context No response
This is probably too late but for future reference here's what you can do.
In your jest.config.(js|ts) file you can
moduleNameMapper: {
'^uuid$': require.resolve('uuid'),
},

Proper way to unit test NestJS controller?

I'm new to NestJS and would like to understand how I can unit test an endpoint with config dependencies and 3rd party library dependencies.
Code flow is along the lines of
Main -> Controller -> Service
Service uses config values from ConfigModule and passes these values to a third party library for authentication. The config values themselves are loaded in onModuleInit.
Please let me know if examples/code snippets are required. Thank you!
This repository has a lot of examples on unit testing with NestJS.
In general, with the class your testing, you should mock out the dependencies being injected into it using a custom provider. Then you can have complete control over what values are being returned from the dependencies

Setting release configuration for SPA / webpack

I'm developing a Single Page Application and using Webpack for bundling up the modules.
One of my source files (I'm using TypeScript) has settings and configuration used in the application e.g.
// app-settings.ts
export class AppSettings {
public static ApiUrlPrefix: string = "//localhost/myapi/";
}
Which I then use in my code like:
//some-class.ts
import {AppSettings} from "./app-settings"
export class SomeClass {
contructor() {
var something = AppSettings.ApiUrlPrefix;
}
}
When release time comes, I'm going to want the settings to match the live environment.
What's a good way with either gulp, npm or webpack configs to update the settings file? I've seen the HtmlWebpackPlugin which can take a template and plug in some options, so I guess I'm looking for something similar.
You can also use the webpack.DefinePlugin. The Define plugin allows you to pass "Free Global" or "macro-like" variables into your project that you can use. To use webpack.DefinePlugin simply require() webpack into your project.
Here's the documentation and an example on how to use it.

Where to load secrets/.env in intern

I'm setting up our e2e testing service with intern and want to keep my secrets (sauce labs key etc) in a .env file using the npm dotenv library. in order to do that i need to require it somewhere. Where would be the earliest place I can do that? My intern configs all inherit from a base configuration, so i plan to use that for now- but is there somewhere earlier?
for the record, this is a self-contained testing service, not part of another framework and i'm using this library: https://github.com/motdotla/dotenv
In case there is no better point of entry, I'm updating with my own solution which injects the environmental variables prior to loading the intern.js config module:
define( ['intern/dojo/node!dotenv'], function (dotenv) {
dotenv.config();
return { intern config object };
});

Grunt task to optionally include an AMD module for different environment

I'm developing a web app using Require.js for AMD and amplify.request to abstract away my AJAX calls. The other advantage to amplify.request is that I've defined an alternative module containing mocked versions of my requests that I can use for testing purposes. Currently, I'm switching between the two versions of my request module by simply commenting/un-commenting the module reference in my main.js file.
What I'd love to do is use Grunt to create different builds of my app depending on which module I wanted included. I could also use it to do things like turn my debug mode on or off. I'm picturing something similar to usemin, only for references inside JavaScript, not HTML.
Anyone know of a plugin that does this, or have a suggestion about how I could do it with Grunt?
On our current project we have a few different environments. For each of them, we can specify different configuration settings for the requirejs build.
To distinguish between these different environments, I've used a parameter target.
You can simply pass this to grunt by appending it to your call like
grunt --target=debug
And you can access this parameter in the Gruntfile, by using grunt.option, like
var target = (grunt.option('target') || 'debug').toLowerCase();
The line above will default to debug. You could then make use of the paths configuration setting of requirejs to point the build to the correct module. Example code below.
requirejs: {
compile: {
options: {
paths: {
"your/path/to/amplify/request": target === "debug" ? "path/to/mock" : "path/to/real",
}
}
}
}

Resources