How to run a single test suite in Jest? - unit-testing

I have many test suites. I wanna to run a singe one and skip all the others, and I would like to do this on the code level.
I know I can do this using .only() and .skip() in a test file, but that supports only the tests / describes defined in that file.
Is there a way to do this globally? Like is there something like .only() which - when called on the top level describe - runs only that test suite and all others are skipped?
Or: when called on a single test ( it().only() ), then only that test runs and nothing else?
I see nothing like this in the API, but maybe Jest can be configured to work this way?
Is this possible with Jest or is this something I can only do via CLI?

If I understand correctly: You want to run just one test suite/file.
You can do this from the command line with jest path/to/filename.test.js.
Within a file, you can use test.only(name, fn, timeout) to only run that test. This won't stop Jest from moving on to the next testing file though.
Full Jest CLI docs
As far as I am aware, you cannot do this from within the test file itself.
The closest I can think of would be to set the `testmatch' in Jest's config to a pattern that only matches the file(s) you want run.
package.json
{
"name": "my-project",
"jest": {
"testmatch": "**/my.test.js"
}
}

I think if you adapt this answer: https://stackoverflow.com/a/59487370/14553660 it should give you what you need.
For example:
testsuite.test.js
import { signuptests } from './signup.test.js'
import { logintests } from './login.test.js'
import { logouttests } from './logout.test.js'
describe('Signup', signuptests)
describe.only('Login', logintests)
describe('Logout', logouttests)
signup.test.js
export const signuptests = () => {
it('Should have login elements', () => {});
it('Should Signup', () => {}});
}
login.test.js
export const logintests = () => {
it.only('Should Login', () => {}});
it('etc',()=>{});
}
logout.test.js
export const logouttests = () => {
it('Should Logout', () => {}});
it('etc',()=>{});
}
You will be able to use .only at the top level - in the testsuite file - to determine which test files are run, and you can also use .only within each individual test file (e.g. within login.test.js) to only run one particular test from that file.
I don't know that there is a limit to nesting describe blocks, so I imagine you could even make a 'master-testsuite' that imports different testsuites (which in turn import different test files...etc)

Related

How to skip mocked image and get real image attributes with Jest?

I am writing unit tests and I want to test an img atrributes. However, when I make an assertion, I get mocked img attributes which is under __mocks__>fileMock.js. Because I mock files, I only get mocked file atrributes. How can I skip mocked files in my tests?
describe('Buttons', () => {
test('Clear filters work after filtering tools, workflows and using searchbar', async () => {
render(<HeaderBar {...defaults} />);
const clearFilterButton = screen.getByRole('button', { name: 'Clear Filters' });
const toolsButton = screen.getByRole('button', { name: 'TOOLS' });
const selectedTools = await within(toolsButton).findByRole('img');
expect(selectedTools).toHaveAttribute('src', 'images/tools-selected.png');
});
And test result is :
Buttons › Clear filters work after filtering tools, workflows and using searchbar
expect(element).toHaveAttribute("src", "images/tools-selected.png") // element.getAttribute("src") === "images/tools-selected.png"
Expected the element to have attribute:
src="images/tools-selected.png"
Received:
src="test-file-stub"
39 | const toolsButton = screen.getByRole('button', { name: 'TOOLS' });
40 | const selectedTools = await within(toolsButton).findByRole('img');
> 41 | expect(selectedTools).toHaveAttribute('src', 'images/tools-selected.png');
I need to test real image, and skip mocking that img in my test.
It sounds like you have a manual user module mock defined in a __mock__ folder next to your actual code.
In that case the mock is used in any test file where you call jest.mock('moduleName') unless automock is set to true in which case the mock will always be used.
If you are explicitly mocking the file using jest.mock('moduleName') then simply remove that from the test file where you want to use the actual code instead of the mock.
If you have automock set to true in your Jest config then you can tell Jest to use the original code file in a given test by using jest.unmock('moduleName').

Browser history needs a DOM in my tests with jest

When I try to test my sagas I get the following error:
Invariant failed: Browser history needs a DOM
and test suite failed to run
It happens because I use function redirectTo() in my sagas
This function exports from this file:
import createHistory from 'history/createBrowserHistory';
export const history = createHistory();
export const redirectTo = (path: string): void => {
history.push(path);
};
How can I solve this problem? I need emulate DOM?
This error occurs even if I use saga which does not contain redirectTo() function
according to JEST documentation you need to set the testEnvironment variable to jsdom by adding it to jest.config file for all tests or a comment in the .spec file for the single suite
For single file add this comment at the top:
/**
* #jest-environment jsdom
*/
or to set the jsdom environment for all tests add this:
jest.config.js
module.exports = {
testEnvironment: 'jest-environment-jsdom',
// ... other options ...
}

How to get extensionContext in vscode extension unit test?

Currently I am writing unit tests about vscode extension. But some functions are using extensionContext and I can't get extensionContext in unit tests. Any way to get it?
Just came across this question, because I had exactly the same problem.
It looks like you can do the following in a test:
const ext = vscode.extensions.getExtension("publisher.extensionName");
And you can return anything from your activate function, so you could decide to return the extension context (or anything else that you need) there:
export async function activate(
context: vscode.ExtensionContext
): Promise<vscode.ExtensionContext> {
// Your activation code...
return context;
}
And then you can access the context in the test:
const ext = vscode.extensions.getExtension("publisher.extensionName");
const myExtensionContext = await ext.activate();
You find publisher.extensionName information in package.json of the extension:
{
"publisher": "myself",
"name": "myextension",
"displayName": "My Extension",
"description": "",
"version": "1.0.0",
...
Another idea is to add a command that returns the context:
export function activate(context: vscode.ExtensionContext) {
context.subscriptions.push(vscode.commands.registerCommand('getContext', () => context));
}
and then get the context by:
const context = await vscode.commands.executeCommand("getContext") as vscode.ExtensionContext;
But be careful not to expose the context in production
This is an answer to an old question, but I've had the same problem and I'm answering it now, so others can see it.
I found this solution in https://github.dev/microsoft/vscode extensions/vscode-api-test/src/extension.ts and extensions/vscode-api-test/src/singlefolder-test/state.test.ts files.
First, the context entered in the activate function must be registered in the global as shown below.
import * as vscode from 'vscode';
export function activate(_context: vscode.ExtensionContext) {
// Set context as a global as some tests depend on it
(global as any).testExtensionContext = _context;
}
After that, you can use it as follows in the file to be tested.
import * as assert from 'assert';
import 'mocha';
import { ExtensionContext, extensions } from 'vscode';
suite('vscode API - globalState / workspaceState', () => {
let extensionContext: ExtensionContext;
suiteSetup(async () => {
// Trigger extension activation and grab the context as some tests depend on it
await extensions.getExtension('vscode.vscode-api-tests')?.activate();
extensionContext = (global as any).testExtensionContext;
});
test('state', async () => {
// Do some tests here using extensionContext
}
});
});
In the signature of the activate function, context is received as a parameter, but I don't know why, but here it can be used without setting context as a parameter. It may be that the corresponding value is entered automatically.

How to mock global Vue.js variable in JEST test

I have a global property/variable with my app urls:
Vue.prototype.$apiUrls = {
root: 'http://localhost:8080/',
api: 'api/v1/'
// etc.
}
I use it inside my components as axios request:
axios.get(`${this.$apiUrls.root}${this.$apiUrls.api}/users/`)
Now I want to test my component's code, I've mocked axios already, but still I receive an error:
TypeError: Cannot read property '$apiUrls' of undefined
I've tried to define/mock this property inside each test and/or in JEST's setup file, like e.g.
global.$apiUrls = {...}
// or
Vue.prototype.$apiUrls = {...}
// or
Object.defineProperties(Vue.prototype, {$apiUrls: {...}})
I've also tried mocking it to window or this (yeah, thats silly), but with no success - I still receive that error - please help.
There is two ways to achieve this. One is using the Config option, as mentioned by #Aldarund. You can read about it here.
If you are using Jest, I recommend doing this in the jest.init.js file:
import { config } from '#vue/test-utils'
config.mocks['$apiUrls'] = {
'some/endpoint'
}
Then add this to the jest section of your package.json:
"setupFiles": [
"<rootDir>/jest.init.js"
]
Now it is globally mocked. If you want to do this on a per test basis, you can use the mocks mounting option:
const wrapper = shallowMount(Foo, {
mocks: {
$apiUrls: 'some/endpoint'
}
})
Hopefully this helps!
If you are interested I am compiling a collection of simple guides on how to test Vue components here. It's under development, but feel free to ask make an issue if you need help with other related things to testing Vue components.
I don't think the answers above work anymore (in 2020).
Here's what worked for me:
For vue-test-utils 1.x.x (Vue 2)
Create a new file, name it eg. jest.init.js
Give it the following content:
import { config } from "#vue/test-utils";
config.mocks["yourGlobalProperty"] = label => label; //you can replace it with your own mock
Add this to your jest.config.js (actually write "rootDir", don't replace anything with a real path)
module.exports = {
setupFiles: ["<rootDir>/jest.init.js"]
}
These files will be only ran before jest runs unit tests.
Note that I'm importing {config}, not the default export. I don't know why the default didn't work for me. Even the documentation for vue test utils doesn't import the default export anymore
Also make sure you're not trying to import from the old vue-test-utils package. (The new one is #vue/test-utils)
For #vue/test-utils 2.x.x (vue-test-utils-next) (Vue 3)
Follow steps like for 1.x.x above, but in step two, do this instead:
import { config } from "#vue/test-utils"; //2.0.0-beta.5
config.global.mocks = {
yourGlobalProperty: label => label
};
You can do it with vue-test-utils beta 15 and later.
Here docs
And some example would be:
import VueTestUtils from '#vue/test-utils'
VueTestUtils.config.mocks['$apiUrls'] = {
...
}

Jest globalSetup option not working

I'm trying to make a function called loadFixtures available to all Jest tests.
I have the following line within the jest config object inside package.json:
"globalSetup": "<rootDir>/src/test/js/config/setup-globals.js"
setup-globals.js contains:
module.exports = function() {
function loadFixtures(filename) {
console.info('loadFixtures is working');
}
}
Within my tests I have, for example:
beforeEach(() => {
loadFixtures('tooltip-fixture.html');
});
However when I run Jest I get the following for each test:
ReferenceError: loadFixtures is not defined
I verified that the setup-globals.js file is definitely being found and loaded in by Jest before the tests execute.
Can anyone assist in identifying where I've gone wrong here? I've spent pretty much an entire day trying to debug without luck.
You should be using setupFiles and not globalSetup.
// jest config
"setupFiles": [
"<rootDir>/src/test/js/config/setup-globals.js"
]
then src/test/js/config/setup-globals.js:
global.loadFixtures(filename) {
console.info('loadFixtures is working');
}
references: https://medium.com/#justintulk/how-to-mock-an-external-library-in-jest-140ac7b210c2
If you bootstrapped your application using npx create-react-app (CRA), you do not need to add the setupFiles key under your jest key in the package.json file (CRA prevents overriding that key).
what you simply need to do is to add the file setupTests.js in the root of your SRC folder, and populate it with the snippet below:
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({
adapter: new Adapter(),
});
remember you must have earlier installed the right versions of enzyme and enzyme-adapter-react
CRA has been wired to automatically load the setupTests.js file in the src folder if it exists. Hence after adding these, you can then go over to your test and do import {shallow} from enzyme without triggering an error.
if you are not using Create-react-app, all you need to do, in addition to adding the file above to your src folder is to add the key setupFiles into the jest key in your package.json. it should look like this:
"jest": {
"setupFiles": ['<rootDir>/src/setupTests.js'],
}
and you are good to go.
Cheers!
You're defining a function in a different scope. How about you create a separate module and import it directly in your test files. Or if you really want to define it in the global scope, try using the following code in your setup-globals.js file.
module.exports = function() {
global.loadFixtures = function(filename) {
console.info('loadFixtures is working');
}
}