How to use getDimensionsFor method in Cypress

Shallow rendering (which you are using for your current tests) only renders one level deep. This means that you won't be able to simulate the render() method or the behaviour of child components using the shallow renderer. See the documentation here for more info.

If you want to effectively unit test this code example, you shouldn't try and simulate its child behaviour. Instead, you should test the <Parent /> and <Child /> separately. This prevents changes in your Child component affecting the test results in your Parent component, or vice versa. This is pretty much the whole reason the shallow renderer exists! From the documentation:

Shallow rendering is useful to constrain yourself to testing a component as a unit, and to ensure that your tests aren't indirectly asserting on behaviour of child components.

I would write this test for the child component, using a mock function for its onChildClick prop:

test('triggers its onChildClick prop when clicked', () => {
    const mock = jest.fn()
    const wrapper = shallow(<Child onChildClick={mock} />)
    wrapper.find('.toggle').simulate('click')
    expect(mock).toHaveBeenCalledTimes(1)
})

And I would write this test for the parent, passing in the data to ensure the child is rendered:

test('sets its state when its child is clicked', (done) => {
    const wrapper = shallow(<App data={{ test: 'test' }}/>)
    expect(wrapper.state('enable')).toBe(false)

    wrapper.find('Child').props().onChildClick()
    expect(wrapper.state('enable')).toBe(true)
})

Just tried both of these tests and they work fine. I'm testing the full functionality of the components here, except the process is separated into units. The child triggers its onChildClick prop when the button is clicked, and triggering that prop inside the parent sets the state of enable to true.

Full-DOM rendering (with mount(<Parent />))is a lot more messy, and I only really find it useful for testing components that use DOM apis (which shouldn't happen much in React anyway). Have a look at the documentation again for a fuller explanation!

If you want to test larger-scale features of your app (which it looks like you do), I'd suggest using an end-to-end testing framework like Cypress.

Also, one last thing... you're using wrapper.find('toggle'), but if you want to find a node by its className, then you need to do wrapper.find('.toggle') instead.

Hope this helps!

Put it in a variable first, then use the variable in the Cypress call.

const body = {
  "address": Random.address,
  "address_complement": Random.address_complement,
  "address_city": Random.address_city,
  "address_number": `${Random.address_number}`,
  "address_district": Random.address_district,
  "address_state": Random.address_state,
  "cep": `${Random.cep}`,
  "cnpj": Random.cnpj,
  "company_name": Random.company_name,
  "headquarters": fAffiliate.headquarters[1],
  "ie": `${Random.ie}`,
  "phone": Random.phone,
  "rntrc": `${Random.rntrc}`,
  "status": fAffiliate.status[0],
  "trading_name": Random.trading_name
};

cy.request({
  url: "/api/affiliate/create",
  method: "POST",
  headers: {
    Authorization: `bearer ${access_token}`,
  },
  body: body
})

Then you can use the body variable again for a second request.

I assume that inside the cy.log($(this).... you might still need to add cy.log(Cypress.$(this)... in order to use the jquery in Cypress. I haven't tried yet, but its worth to give a try.

Cypress.$(java).each(function() {
            cy.log(Cypress.$(this).find("configuration>property>name").text())
        })

Once you have declared the body bodyParams as an object, just set it as property for body: key.

Cypress.Commands.add("GETRequest", (requestUrl, bodyParams) => {
    cy.request({
        method: 'GET',
        url: apiURL + requestUrl,
        form: true,
        headers: {
            Authorization: "Bearer " + token
        },
        body: bodyParams
    });
})

it('Testing picture uploading', () => {
    cy.fixture('testPicture.png').then(fileContent => {
        cy.get('input[type="file"]').attachFile({
            fileContent: fileContent.toString(),
            fileName: 'testPicture.png',
            mimeType: 'image/png'
        });
    });
});

Use cypress file upload package: https://www.npmjs.com/package/cypress-file-upload

Note: testPicture.png must be in fixture folder of cypress

Use cy.log(yourTextHere). That should work.

Actually your entire app and the modal window is contained inside an iframe whose id="ctl00_secframe". So you need to make use of Iframe in cypress to close the Privacy window as well as to fetch other elements.

You can also refer : https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/

Since you are selecting the input with force: true (meaning that the actual input element is hidden from view), one possibility is that perhaps the input that is being referred doesn't have the requirements in place for the selectFile to succeed. Perhaps in Firefox the input type is inferred from context while in Chrome it would need to be explicitly set.

Have you checked that the element #new-project-photo passed to selectFile satisfies this requirement specifically (from the Cypress docs linked above)?

a single input element with type="file", or a label element attached to one

If you could post the element and its context that could help further recreate this scenario and allow testing. Right now from the information available it's not possible to recreate this problem reliably.

If your it() tests share the same domain, you should use traditional function declaration "function() {do smth}" so you can use this. context, just right after the describe() define let variable with no value. After that in .then() inside your test "it()" you can redefine variable value like this.str = value; This value will be saved and can be passed to other it();

Example:

describe('test', function() {
  let str;
  it('take value from input', () => {
    cy.visit('/');

    cy.contains('Forms').click();
    cy.contains('Form Layouts').click();
    cy.contains('nb-card', 'Using the Grid').find('[data-cy="imputEmail1"]').type('someemil@email.com').invoke('val').then((value) => {
      this.str = value;
    });
  });

  it('put value', () => {
    cy.visit('/');
    cy.log(this.str);
  });
});