BDD (Behavior Driven Development) is a method of testing where you use "Given" for the scenario, "When" for the environment of the action, and "Then" for the action. For example, "Given notes, when deleting, then remove a note". There are many examples of how to use BDD in testing, such as the npm package "jest-cucumber".
BDD has some advantages, such as making it easier for new developers to understand the flow of the component. However, there are also some disadvantages, such as it being complex to write, not cleaning up the sinon as in the given example, and a small change can become complicated to edit. For these reasons, it is recommended not to use BDD in unit testing and instead apply it only in E2E testing. Instead, try using "describe" and "it" for well-separated tests.
React Behavior Driven Development (BDD)
Sinon is a powerful tool that allows for mock, stub, and spy functions. There are several resources available to learn how to use Sinon, such as the YouTube video "Mocking with Sinon.JS" and the accompanying code on Github. You can also find helpful information on using stub functions in the video "Testing with Stubs in SinonJS".
For accessibility testing, you can use the axe library in Cypress, in unit testing, and in development. It is also recommended to have someone manually test for accessibility, as automated testing cannot catch everything. When testing other components, try testing them as if a screen reader is reading them, as this will also help with accessibility.
To use the axe library in your tests, you can import the axe function from jest-axe and use it in your test cases. For example:
import React from 'react';
import { axe } from 'jest-axe';
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';
it('should not have basic accessibility issues', async () => {
const { container } = render(<Component />);
const results = await axe(container);
expect(results).toHaveNoViolations();
});
For accessibility, it is recommended to use the axe library and to have an expert consult on the project to make it A, AA, or AAA compliant in terms of accessibility. There are also helpful videos available, such as the video "The Importance of Accessibility Testing". We also can use cypress-exe
Lighthouse should not only be used as a manual, but also be set up to run in the CI/CD pipeline. This can block the pipeline if a score below a certain threshold (such as X) is achieved. This is useful for ensuring performance stays at an acceptable level, for example, if the performance score falls below 60, the pipeline can be blocked to investigate the issue.
The key is to use Cypress and take snapshots. Care should be taken as even the same browser and computer can have pixel differences due to video card drivers.