Skip to content
Home

Make and run tests

Make tests for the new component (or for your current issue) and set up screenshot tests from the Eufemia portal. The tests should be located under __tests__ in the component folder.

  • Tip 1: Create tests for each prop that change your component.
  • Tip 2: Always check and make the tests fail when you are writing tests.

More on testing in the UI Library.

Running tests locally

Run the commands from the repository's root folder. Replace breadcrumb with your component's name in the commands.

  1. Run the integration tests:
# Run all tests
yarn test
# Execute the tests on file (git) changes
yarn test:watch


# Run all tests including the word 'breadcrumb'
yarn test breadcrumb


# Or be more specific
yarn test /breadcrumb.test.tsx


# Run several together
yarn test breadcrumb avatar button
  1. Update the changed snapshots:
yarn test:update


# More specific
yarn test:update breadcrumb avatar

Jest integration tests uses this naming convention: /__tests__/{ComponentName}.test.tsx

  1. Run visual and end-to-end test:

NB: Make sure you have the portal running locally on port 8000.

Visual tests:

# 1. First start the portal
yarn start


# 2. Then run screenshot tests for e.g. 'breadcrumb' or 'avatar'
yarn test:screenshots breadcrumb avatar


# You can also start it in watch mode
yarn test:screenshots:watch breadcrumb avatar

Visual tests uses this naming convention: /__tests__/{ComponentName}.e2e.spec.ts

Playwright end-to-end tests:

# 1. First start the portal
yarn start


# 2. Then run Playwright tests including 'Slider' or 'Button'
yarn test:e2e /Slider\|Button/


# You can also start it in watch mode
yarn test:e2e:watch


# Or run the tests for the portal
yarn test:e2e:portal
yarn test:e2e:portal:watch

Playwright uses this naming convention: /__tests__/{ComponentName}.screenshot.test.ts

  1. Update eventually new or valid visual PNG snapshots:
# Update screenshot tests including 'breadcrumb'
yarn test:screenshots:update breadcrumb

You can also press the u during a watch mode to update outdated snapshots.

  1. How to deal with failing visual tests?

When a visual test fails, a visual comparison file (diff) will be created. Its location and name will be:

  • **/__tests__/__image_snapshots__/__diff_output__/*.snap-diff.png

you can find a report entry (index.html), that lists all of the failed tests here:

  • /packages/dnb-eufemia/jest-visual-diff-report/index.html

You may check out the CI/CLI logs for more details.

GitHub Actions: If visual screenshot test is failing on the CI, you can navigate to the test "Summary" where you can find "Artifacts". There you can download the visual-test-artifact zip file, containing the visual diff files as well as the report entry inside /jest-visual-diff-report.

Support SCSS snapshot test

Add a similar code snippet to your tests for watching changes in the SCSS you just created.

import { loadScss } from '../../../core/jest/jestSetup'
describe('Button scss', () => {
  it('has to match style dependencies css', () => {
    const css = loadScss(require.resolve('../style/deps.scss'))
    expect(css).toMatchSnapshot()
  })


  it.each(['ui', 'sbanken'])(
    'has to match theme css for %s',
    (themeName) => {
      const css = loadScss(
        require.resolve(
          `../style/themes/dnb-button-theme-${themeName}.scss`,
        ),
      )
      expect(css).toMatchSnapshot()
    },
  )
})

Support Axe test

Add a similar code snippet to your tests (as the last test). It will test the accessibility of your new component. Read more on Jest Axe.

describe('Breadcrumb aria', () => {
  it('should validate', async () => {
    const Component = render(
      <Breadcrumb
        data={[
          { href: '/' },
          { href: '/page1', text: 'Page 1' },
          { href: '/page1/page2', text: 'Page 2' },
        ]}
        variant="collapse"
        isCollapsed={false}
      />,
    )
    expect(await axeComponent(Component)).toHaveNoViolations()
  })
})