i need some help with playwright and cucumber
i set up a gherkin and some tests for it, but i have problems with the expect command.
here are my imports:
import { ICustomWorld } from "../support/custom-world";
import { Given, When, Then } from "#cucumber/cucumber";
import { expect } from "#playwright/test";
and here is a sample of the problem:
Then(
"The Menu Niederlassungsdaten is default",
async function (this: ICustomWorld) {
const { page } = this;
const TitleLabel = await page?.locator('#app > div.container-fluid > div.row.content.justify-content-center > div > div > div > div.col-12.col-md-3.col-lg-2.tabs > div > a.list-group-item.text-center.router-link-exact-active.active');
await expect(TitleLabel).toHaveAttribute("aria-current","page");
}
);
This expect.toHaveAttribute is working perfectly without cucumber. But in the given when then from cucumber is it not working. The error is:
Error: toHaveAttribute must be called during the test
So it seems the expect command is missing this playwright test command. What can i do to get this working in cucumber?
Related
I am trying to run Jest unit tests on function logic that is imported from a Svelte component. The program runs fine except when I try to import into Jest: I can console log the env variable in the line below ok.
The problem is that this line gives me an error when i try to run the unit test, I guess because its trying to import the file into the jest test. It runs fine when the program is actually running, but when the Jest test tries to import it, the context changes or ... something. Anyway, here's the line, from my file src/routes/signup/index.svelte:
// in the script tag of a svelte component
<script context="module">
const googleRecaptchaSiteKey =
typeof import.meta.env.VITE_GOOGLE_RECAPTCHA_KEY === "string"
? import.meta.env.VITE_GOOGLE_RECAPTCHA_KEY
: ""
export function foo() {
// ...
}
</script>
This code must run in my Jest test because it gives the error when I run npm test, so here's how I am executing that code:
import { foo } from "../src/routes/signup/index.svelte"
// It must execute the whole component when I import from it?
describe("signup page logic", () => {
test("ensure that the signup form button enablement conditions work properly", () => {
const failureOne = foo()
}
}
The error message itself:
/home/rlm/Code/projName/src/routes/signup/index.svelte:446
const googleRecaptchaSiteKey = typeof import.meta.env.VITE_GOOGLE_RECAPTCHA_KEY === "string"
^^^^
SyntaxError: Cannot use 'import.meta' outside a module
> 1 | import { updateEnabledSubmitSignup } from "../src/routes/signup/index.svelte"
Now since writing the above text, I have been adventuring for approx 27 minutes to discover a solution. What I have done is try to follow guides.
Per the instruction of Environment variables with SvelteKit I did:
in src/lib/variables.ts:
export const variables = {
foo: import.meta.env.VITE_FOO,
secondRecaptchaKey: import.meta.env.VITE_SECOND_RECAPTCHA_KEY,
}
And then I import it into the Svelte file: import { variables } from "../../lib/variables"
I run npm run dev and it console logs the value fine.
But then when I run npm test I get:
src/lib/variables.ts:3:23 - error TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node12', or 'nodenext'.
3 secondRecaptchaKey: import.meta.env.VITE_SECOND_RECAPTCHA_KEY,
TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'esnext', or 'system'
Test suite failed to run import.meta.env.VITE_* does also but I tried to follow it and it fails even after installing vite-plugin-environment and babel-plugin-transform-import-meta and adding them to the babel plugins:
export const variables = { // logs with all values undefined
foo: process.env.VITE_FOO,
secondRecaptchaKey: process.env.VITE_SECOND_RECAPTCHA_KEY,
}
TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'esnext', or 'system' also has advice that fails for me, or i have done it wrong. In my current state npm test logs the env variables as undefined.
edit: For anyone in the future who has this problem, I was able to go around the problem by doing this totally-good-enough workaround:
jest.mock("../src/lib/envVariables", () => ({
envVariables: { foo: "bar", secondRecaptchaKey: "someMockValue" },
}))
I credit nstanard in this post for saving us from the hassle
I'm working with puppeteer. I want to get the node value of a selected element in a textbox . Using dev tools I have copied the selector:
var mySelector = "div.chosen-container.chosen-container-multi.filter-main-values.fmd-values.chosen-container-active.chosen-with-drop > ul > li.search-choice > span";
I can use this to find it in devtools:
But after running my puppeteer code:
var selectedCountry = await page.evaluate((mySelector) => {return Array.from(document.querySelectorAll(mySelector))});
console.log(selectedCountry);
In the vs code debug window, I see:
(0) []
What am I doing wrong?
You are not passing the selector to the evaluate function properly.
var selectedCounty = await page.evaluate((selectedCountySelector) => {
return Array.from(document.querySelectorAll(selectedCountySelector))
}, selectedCountySelector); // <-- pass it here
console.log(selectedCounty);
While in development we occasionally use skip or only to debug a particular test or test suit. Accidentally, we might forget to revert the cases and push the code for PR. I am looking for a way to detect or automatically run all tests even for skip and only tests in our CI pipeline(using Github action). It can be in either case as follow.
Fail the test when there are skip or only tests.
Run all tests even for skip and only.
Very much appreciate any help.
I came up with a solution for the second part of the question about running all tests even for skip and only. I don't think it's elegant solution, but it works and it's easy to implement.
First of all you need to change test runner to jest-circus if you work with jest bellow 27.x version. We need it so our custom test environment will use handleTestEvent function to watch for setup events. To do so, install jest-circus with npm i jest-circus and then in your jest.config.js set testRunner property:
//jest.config.js
module.exports = {
testRunner: 'jest-circus/runner',
...
}
From Jest 27.0 they changed default test runner to jest-circus so you can skip this step if you have this or higher version.
Then you have to write custom test environment. I suggest to write it based on jsdom so for example we also have access to window object in tests and etc. To do so run in terminal npm i jest-environment-jsdom and then create custom environment like so:
//custom-jsdom-environment.js
const JsDomEnvironment = require('jest-environment-jsdom')
class CustomJsDomEnvironment extends JsDomEnvironment {
async handleTestEvent(event, state) {
if(process.env.IS_CI === 'true' && event.name === 'setup') {
this.global.describe.only = this.global.describe
this.global.describe.skip = this.global.describe
this.global.fdescribe = this.global.describe
this.global.xdescribe = this.global.describe
this.global.it.only = this.global.it
this.global.it.skip = this.global.it
this.global.fit = this.global.it
this.global.xit = this.global.it
this.global.test.only = this.global.test
this.global.test.skip = this.global.test
this.global.ftest = this.global.test
this.global.xtest = this.global.test
}
}
}
module.exports = CustomJsDomEnvironment
And inform jest to properly use it:
//jest.config.js
module.exports = {
testRunner: 'jest-circus/runner',
testEnvironment: 'path/to/custom/jsdom/environment.js',
...
}
Then you just have to setup custom environment value IS_CI in your CI pipeline and from now on all your skipped tests will run.
Also in custom test environment you could watch for skipped test and throw an error when your runner find skip/only. Unfortunately throwing an error in this place won't fail a test. You would need to find a way to fail a test outside of a test.
//custom-jsdom-environment.js
const JsDomEnvironment = require('jest-environment-jsdom')
const path = require('path')
class CustomJsDomEnvironment extends JsDomEnvironment {
constructor(config, context) {
super(config, context)
const testPath = context.testPath
this.testFile = path.basename(testPath)
}
async handleTestEvent(event, state) {
if(process.env.IS_CI === 'true' && event.name === 'add_test') {
if(event.mode === 'skip' || event.mode === 'only') {
const msg = `Run ${event.mode} test: '${event.testName}' in ${this.testFile}`
throw new Error(msg)
}
}
}
}
module.exports = CustomJsDomEnvironment
I'm running into an issue when integrating my stories into my unit tests using Jest & React Testing Library in a NextJS app. In Storybook, my NextJS components render without issue with the Storybook Addon Next Router working as expected. However, in my Jest test file, my test throws an error because useRouter() returns null. I believe I've setup all the addons correctly.
My setup:
NextJS 12
Jest & React Testing Library
Storybook
Storybook Addon Next Router (for using Next router inside Storybook)
#storybook/testing-react (for integrating my stories, args & params with testing library)
The problem:
I've setup all the files according to the docs. The story renders fine inside Storybook and the useRouter() works thanks to the Storybook Next addon. However, the composeStories() function from #storybook/testing-react seems to fail to properly initialize the Next router Provider from the first addon. My unit test fails with the following error:
Test suite failed to run
TypeError: Cannot read property 'locale' of null
And points to the following line inside my component:
// Events.tsx
const { locale = 'en' } = useRouter();
This is my test file:
// Events.test.tsx
import React from 'react';
import { render, screen } from '#testing-library/react';
import { composeStories } from '#storybook/testing-react';
import * as stories from './Events.stories'
const { WithSeasonsAndEvents } = composeStories(stories);
describe('Events Screen', ()=> {
render(<WithSeasonsAndEvents />);
it('renders input data', ()=> {
// set up test
});
});
And my stories file:
// Events.stories.tsx
import React from 'react';
import { ComponentStory, ComponentMeta } from '#storybook/react';
import Events from './Events';
export default {
title: 'Events/Events Screen',
component: Events
} as ComponentMeta<typeof Events>;
const Template: ComponentStory<typeof Events> = (args) => <Events {...args} />;
export const WithSeasonsAndEvents = Template.bind({});
WithSeasonsAndEvents.args = {
// many args here
};
This story renders fine in Storybook. useRouter() works as expected inside my story and I am able to use all of its properties including pathname and locale. However, for some reason the useRouter() function returns null when the composed story is being rendered by React Testing Library.
What I have tried:
Verified installing #storybook/testing-react and set up my global configuration in jest setup file:
// jest-setup.ts
import '#testing-library/jest-dom/extend-expect';
import { setGlobalConfig } from '#storybook/testing-react';
// Storybook's preview file location
import * as globalStorybookConfig from './.storybook/preview';
setGlobalConfig(globalStorybookConfig);
Verified that jest reads my setup file and finds my Storybook preview file
Verified both .storybook/preview.js and .storybook/main.js match the usage guide:
preview.js
// .storybook/preview.js
import '../styles/tailwind.css';
import { RouterContext } from "next/dist/shared/lib/router-context"; // next 12 https://storybook.js.org/docs/react/writing-stories/parameters
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
nextRouter: {
Provider: RouterContext.Provider,
locale: 'en',
},
}
main.js
// .storybook/main.js
module.exports = {
"stories": [
"../stories/**/*.stories.mdx",
"../stories/**/*.stories.#(js|jsx|ts|tsx)",
"../components/**/*.stories.#(js|jsx|ts|tsx|mdx)"
],
"addons": [
"#storybook/addon-links",
"#storybook/addon-essentials",
"storybook-addon-next-router",
],
"framework": "#storybook/react"
}
Stories render fine in Storybook, all useRouter() features work, and when I console.log the useRouter() return value, I get the full suite of NextJS useRouter object properties:
// >> console.log(useRouter()); inside Storybook
{
route: "/",
pathname: "/",
query: {},
asPath: "/",
events: {},
isFallback: false,
locale: 'en'
}
However, on the unit test, when logging the return value of useRouter(); inside my component, it returns null. Understandably, because it is null, the { locale } variable assignment is throwing an error in my unit test.
When logging the value of useRouter variable, both inside my Storybook preview and inside my unit test I get the following function:
// >> console.log(useRouter.toString())
function useRouter() {
return _react.default.useContext(_routerContext.RouterContext);
}
Does anyone have any idea on what can be going wrong? I'm fairly new to Storybook but I've tried looking through GitHuB issues and online and haven't been able to solve. No idea why useRouter() returns null inside Jest if the composeStories() fn should take care of resolving my Storybook params & args. Any insight would be appreciated.
I was running with the same issue. I solved it by exporting WithNextRouter as a decorator on preview.js
// preview.js
import { WithNextRouter } from 'storybook-addon-next-router/dist/decorators';
export const decorators = [WithNextRouter];
I'm writing a serverless React app using AWS Amplify. I do my E2E tests using Cypress.
Before each test, I log the user in via the AWS Amplify CLI. Afterwards, I clear all data on the development server and create some new data using fixtures. This way I always have controlled state for each test (see code below).
My question is: Is this a good practice? Or is it bad to make that many requests against the server in before each test? If it is bad, how would you do that if you do not have direct access to the server (again serverless) to run commands like cy.exec('npm run db:reset && npm run db:seed')? Cypress does warn me in the console about the use of promises:
Cypress detected that you returned a promise in a test, but also invoked one or more cy commands inside of that promise.
Here is the code I use:
import API, { graphqlOperation } from '#aws-amplify/api';
import Auth from '#aws-amplify/auth';
import Amplify from 'aws-amplify';
import * as R from 'ramda';
import config from '../../src/aws-exports';
import { contacts } from '../../src/contacts/fixtures';
import { replaceEmptyStringsWithNull } from '../../src/contacts/helpers';
import {
createContact as addMutation,
deleteContact as deleteMutation
} from '../../src/graphql/mutations';
import { listContacts } from '../../src/graphql/queries';
Amplify.configure(config);
const deleteContact = input =>
API.graphql(graphqlOperation(deleteMutation, { input }));
const createContact = input =>
API.graphql(graphqlOperation(addMutation, { input }));
describe('Contactlist', () => {
beforeEach(async () => {
await Auth.signIn(Cypress.env('email'), Cypress.env('password'));
const allContacts = await API.graphql(graphqlOperation(listContacts));
await Promise.all(
R.map(
R.pipe(
R.prop('id'),
id => ({ id }),
deleteContact
)
)(allContacts.data.listContacts.items)
);
await Promise.all(
R.map(
R.pipe(
R.dissoc('id'),
replaceEmptyStringsWithNull,
createContact
)
)(contacts)
);
});
// ... my tests
It would be exactly the way I would perform the test. I love to start with a fully controlled state, even if that means having multiple API-calls as a before()