reactjs / reactjs/react.dev

Update react testing doc section for react 18

Open
#5,147 0 comments 0 reactions 1 assignee View on GitHub

@eps1lon is already working on this.

Since Oct 4, 2022.

Dominant language
JavaScript
Stars
11.8k
Forks
7.9k
Avg merge
1d 11h
Merged PRs (30d)
11

Description

I cannot, for the life of me, figure out how to adapt the setup/teardown section of the current react documentation to React 18, I cannot find code testing examples on the React website, or anywhere else I have looked for React 18.

I went to this link, and adapted my beforeEach / afterEach functions according to the instructions:

let container = null;
let root = null;
beforeEach(() => {
    container = document.createElement('div');
    root = createRoot(container)
})

afterEach(() => {
    root.unmount()
    container = null;
    root = null;
})

it("renders without a name", () => {
    ...
    root.render(<CreateAccount
        ...
        loginLink={''}/>);

    const nodeList = root.querySelectorAll('input')
    nodeList.forEach((element, index) => {
        expect(element.value).toBe(textArray[index]);
    })
    expect(nodeList.length).toBe(3);
});

However, I get the following error when I try to run my tests:

root.querySelectorAll is not a function

This test works just fine when using the documentation for the older version of React, and when I run container.querySelectorAll(). I tried running container.querySelectorAll() as well, and it returns zero elements. What am I doing wrong here, and where can I find test recipes for React 18?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.