Import the components and methods 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

blockName: imports
//React lets us create and display components to the user
//We need to import it so that we can look at the components to test them
import React from 'react';

//testing library gives us methods to test components
//we use render to look at React components
//we use cleanup to clear out memory after tests
import {
    render,
    cleanup,
    fireEvent,
    getAllByRole,
} from '@testing-library/react';

//extend-expect gives us methods that let us say what we think a component will look like when we test it
import '@testing-library/jest-dom/extend-expect';

import { Dropdown } from 'semantic-ui-react';

afterEach(cleanup);


Declare the array of dropdown options 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

blockName: options
//grabbed the array of options from the demo code here https://react.semantic-ui.com/modules/dropdown/#types-inline
const options = [
    {
        key: 'Jenny Hess',
        text: 'Jenny Hess',
        value: 'Jenny Hess',
    },
    {
        key: 'Elliot Fu',
        text: 'Elliot Fu',
        value: 'Elliot Fu',
    },
    {
        key: 'Stevie Feliciano',
        text: 'Stevie Feliciano',
        value: 'Stevie Feliciano',
    },
];


A Semantic UI React Dropdown using the options array above. Give it a default value of the first option in the array, Jenny Hess.

1
2
3
4
5
6
7
8

blockName: MyDropdown
const MyDropdown = () => (
    <Dropdown
        data-testid="dropdown"
        options={options}
        defaultValue={options[0].value}
    />
);

We’ll find it using the testid.

Write the tests:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

blockName: tests
it('runs without crashing', () => {
    render(<MyDropdown />);
});

it('can change the value of the dropdown', () => {
    const { getByTestId } = render(<MyDropdown />);

    const dropdown = getByTestId('dropdown');

    const display = dropdown.children[0];

    expect(display.textContent).toBe(options[0].text);

    console.log(display.textContent);

    fireEvent.click(dropdown);

    const dropdownOptions = getAllByRole(dropdown, 'option');

    fireEvent.click(dropdownOptions[2]);

    expect(display.textContent).toBe(options[2].text);

    console.log(display.textContent);
});

To change the value of the dropdown from the default value, we’ll find the dropdown, click the dropdown to open it, then click on one of the option divs that gets displayed when the dropdown is open.

Use getByTestId to find the dropdown component in the rendered code. Remember: if you want to see the rendered html, grab the debug method as well.

` const { debug, getByTestid } = render(); debug()`

A reference to the dropdown component. Its contents are rendered inside it as children elements.

The first child div of the dropdown contains the text that it displays.

It should start out displaying options[0].text because we set the default value to options[0].value.

Use fireEvent.click() to click the dropdown component. This will open it and display the options.

Use getAllByRole to find all the dropdwon options. The dropdown options have the role option. So this returns an array of all 3 options.

Use fireEvent.click() to click the third element in the array of dropdown options.

Expect the value to change.