Unit Testing with Jest and React Testing Library

radicle
1

I found this resource for unit testing blocks in wordpress, and it’s fairly extensive so it’s been a good resource for me to understand what is possible. https://react-wordpress-testing.joshpress.net/ However I can’t seem to figure out how to get the tests to run properly with radicle

I have installed @testing-library/react, react-test-rendere, @wordpress/scripts

Now when I run this test Modal.test.ts lcoated in /resources/scripts/editor` it should fail because the code is not configured correctly yet, but the whole testing command does not even run.

import {edit} from "./Modal.block.tsx"

import {
    render,
    cleanup,
    fireEvent
} from "@testing-library/react"

describe("Save componet", () => {
    afterEach(cleanup);
    //It handles having no saved attribute
    it("matches snapshot with value attribute empty", () => {
      const attributes = { value: '' };
      expect(
        render(
          <Save
            {...{
              attributes,
              clientId: "random-id",
              className: "wp-blocks-whatever",
            }}
          />
        )
      ).toMatchSnapshot();
    });
    //Does it render correctly when attribute has value?
    it("matches snapshot with provided attribute", () => {
      const attributes = { value: "Tomorrow" };
      expect(
        render(
          <Save
            {...{
              attributes,
              clientId: "random-id",
              className: "wp-blocks-whatever",
            }}
          />
        )
      ).toMatchSnapshot();
    });
  });

  describe("Editor componet", () => {
    afterEach(cleanup);
    it("matches snapshot", () => {
      //...
    });
    it("Changes value", () => {
      //Mock intial attributes
      const attributes = { value: "Hi Roy" };
      //Mock set attributes
      const setAttributes = jest.fn();
      //render component
      const {getByLabel} = render(
        <Editor
          {...{
            attributes,
            setAttributes,
            clientId: "random-id",
            className: "wp-blocks-whatever"
          }}
        />
      );
      //Get the input by label text
      const input getByLabelText('Edit Value');
      //Fire a change event on the input
      fireEvent.change(input, {
        target: { value: "New Value" }
      });
      //Was callback function called once?
      expect(onChange).toHaveBeenCalledTimes(1);
      //Was the new value -- not event object -- sent?
      expect(onChange).toHaveBeenCalledWith("New Value");
    });
  });

I don’t have a jest config setup yet, do I just put one at the root, does it need something special to point to the test in the scripts folder.

Is what I am attempting possible.

Ideally I want to setup a simple to test for a custom built block with jest.

Thanks ahead of time.

I get this error

Error: Can't find a root directory while resolving a config file path.
Provided path to resolve: jest.config.js
cwd: /Users/akstudio/Herd/bc-sierra-club
    at resolveConfigPath (/Users/akstudio/Herd/bc-sierra-club/node_modules/jest-config/build/resolveConfigPath.js:123:11)
    at readInitialOptions (/Users/akstudio/Herd/bc-sierra-club/node_modules/jest-config/build/index.js:386:55)
    at readConfig (/Users/akstudio/Herd/bc-sierra-club/node_modules/jest-config/build/index.js:147:54)
    at readConfigs (/Users/akstudio/Herd/bc-sierra-club/node_modules/jest-config/build/index.js:424:32)
    at runCLI (/Users/akstudio/Herd/bc-sierra-club/node_modules/@jest/core/build/cli/index.js:152:29)
    at Object.run (/Users/akstudio/Herd/bc-sierra-club/node_modules/jest-cli/build/run.js:130:62)
2

In my package.json originally I had a config option for jest and I never had that config file, I removed that and the tests seem to be running now, just have to get them to pass now

    "test:unit": "wp-scripts test-unit-js --config jest.config.js",
->>
    "test:unit": "wp-scripts test-unit-js",

I will update if anything else goes wrong but I think this is all I needed to do.

Let me know if there is a better way to UNIT test these Gutenberg blocks.