DEV Community: Paul

React Testing Library

Paul — Tue, 24 Mar 2020 12:00:58 +0000

Why switch from enzyme to react-testing-library?

While enzyme is intended for unit/integration tests, react-testing-library is for blackbox integration tests. Enzyme gives you access to the internal workings of your components and seduces you to test implementation details. Through the blackbox approach of react-testing-library you are forced to write more user-centered tests and interact with the components from the outside instead of accessing implementation details.

Guiding principles

If it relates to rendering components, then it should deal with DOM nodes rather than component instances, and it should not encourage dealing with component instances.
It should be generally useful for testing the application components in the way the user would use it. We are making some trade-offs here because we're using a computer and often a simulated browser environment, but in general, utilities should encourage tests that use the components the way they're intended to be used.
Utility implementations and APIs should be simple and flexible.

Guidelines

Use expect explicitly with toBeInTheDocument() when testing if element exists with getBy or one of the other queries.
Only import the testUtils.js never import @testing-library/react
Prefer the queries ByLabelText, ByPlaceholderText, ByRole, ByText and ByDisplayValue, as they reflect the user experience the most.
If needed use semantic queries like ByAltText or ByTitle, as the user experience can vary for these attributes across various browsers.
Avoid using data-testid with ByTestId as much as possible, because it requires to change the component just for the test.
Focus on writing user-centered tests and avoid testing implementation details. Expect what the user will see.

Apollo, Intl, Redux

To efficiently wrap our test cases in the needed Providers, a custom render function was implemented. This function wraps our test component in Redux, Intl and Apollo. It takes the apolloMocks and the redux initialStore as arguments, to set them as needed in our test case.
The apolloMocks data has to match the query datatype completely otherwise they won't resolve in the test.

Api

A very good resource to get a fast overview is the testing-library cheatsheet.

Queries

The following queries are provided to select elements in the DOM:

ByLabelText
ByPlaceholderText
ByText
ByDisplayValue
ByAltText
ByTitle
ByRole
ByTestId

These need to be combined with the table of selectors below.
E.g. getByLabelText.

For ByText you can use regex to find all elements that contain a fitting text.

Difference get, query, find

	No Match	1 Match	1+ Match	Await?
getBy	throw	return	throw	No
findBy	throw	return	throw	Yes
queryBy	null	return	throw	No
getAllBy	throw	array	array	No
findAllBy	throw	array	array	Yes
queryAllBy	[]	array	array	No

Async

The library provides multiple functions to deal with asynchronous code, like wait and waitForElementToBeRemoved. These functions take a callback and an options object as parameters. In the options, you can set a timeout (default: 1000ms) and an interval (default: 50ms) to check the callback function.

Events

Testing events is done using the fireEvent(node, event) function.
It has multiple helpers for default events that can be used like: fireEvent.click(node).

Jest-Dom

Jest-Dom provides us with additional jest matchers for testing.
Some useful examples are:

toBeInTheDocument
toHaveTextContent
toHaveValue
toBeVisible
toContainElement

Our additions

To select text elements that are filled with intl ids a custom selector was implemented, that can be used with all selector types in the table.
E.g. getByIntlId.

Code to copy

Some of the custom code to adapt the framework to our needs.

Custom renderer

const customRender = (
  ui: React$Element<*>,
  { apolloMocks = [], initialStore = {} }: WrapperParameterType = {}
) =>
  render(
    <Provider store={configureStore(initialStore)}>
      <RawIntlProvider value={intl}>
        <MockedProvider mocks={apolloMocks} addTypename={false}>
          {ui}
        </MockedProvider>
      </RawIntlProvider>
    </Provider>,
    {
      queries: {
        ...queries,
        ...intlQueries,
      },
    }
  );

Custom query

export const buildIntlQueries = (intl: string) => {
  const queryAllByIntlId = (container, intlId, options, ...rest) => {
    const text = intl.formatMessage({ id: intlId, ...options });
    return queryAllByText(container, text, ...rest);
  };

  const getMultipleError = (_, intlId) =>
    `Found multiple elements with the intl id: ${intlId}`;
  const getMissingError = (_, intlId) =>
    `Unable to find an element with the intl id: ${intlId}`;

  const [
    queryByIntlId,
    getAllByIntlId,
    getByIntlId,
    findAllByIntlId,
    findByIntlId,
  ] = buildQueries(queryAllByIntlId, getMultipleError, getMissingError);
  return {
    queryByIntlId,
    getAllByIntlId,
    getByIntlId,
    findAllByIntlId,
    findByIntlId,
  };
};

Packing TensorFlow.js models into npm packages

Paul — Mon, 26 Aug 2019 16:39:34 +0000

Currently, I made a post about how to convert a Keras model into a TensorFlow js one. But once you have the model converted, what is the easiest way to share it between different project and deploy it easily.
To solve that problem, I thought about packing the model into an npm package with a simple classification wrapper.

To achieve that we need:

the resnet50 model pre-trained (tfjs)
the fitting labels for the model outputs
our model wrapper
various config files (npm etc.)

First, we set up the npm package config by running npm init.
During that process, we need to supply the name of the package, version, GitHub and some other simple information. Afterward, already have our basic npm package which is already publishable.
Then I just use a basic babel configuration, so can to implement my code in ES6. And add a prepare command to the package.json to compile the files for publishing.

"scripts": {
  "prepare": "node_modules/@babel/cli/bin/babel.js src --out-dir lib"
}

The model converted in my previous post is now placed under the ResNet50 folder. To decode the model predictions I add a slightly simplified version of the original Keras labels file to the repo under the folder assets.
Now we can get started on the main task, to build a simple to use wrapper around our model.
First, we need install our dependencies, @tensorflow/tfjs, @tensorflow/tfjs-node, and jimp. While it's clear what we need the tfjs modules for, jimp is used to load our image into an array to make it convertible into a tensor.
Now, we build our ResNetPredictor class with a short constructor:

constructor() {
  this.model;
  this.labels = labels;
  this.modelPath = `file:///${__dirname}/../ResNet50/model.json`;
}

Because the tf.loadLayersModel() function is asynchronous we need and can't be called in the constructor, we have to use a little trick now.
We build an asynchronous factory method to initialize our object.

initialize = async () => {
  this.model = await tf.loadLayersModel(this.modelPath);
};

static create = async () => {
  const o = new ResNetPredictor();
  await o.initialize();
  return o;
};

When we want to initialize our object now in an external script we have to run:

load = async () => {
  return ResNetPredictor().create();
}

Now we need a function to load an image from a path or URL and convert it into a tensor, so we can enter it into our model. That's where we need jimp to unpack our image.

loadImg = async imgURI => {
  return Jimp.read(imgURI).then(img => {
    img.resize(224, 224);
    const p = [];
    img.scan(0, 0, img.bitmap.width, img.bitmap.height, function test(
      x,
      y,
      idx
    ) {
      p.push(this.bitmap.data[idx + 0]);
      p.push(this.bitmap.data[idx + 1]);
      p.push(this.bitmap.data[idx + 2]);
    });

    return tf.tensor4d(p, [1, img.bitmap.width, img.bitmap.height, 3]);
  });
};

This function takes any URI and loads the image from that address. Then the image is resized to 224x224 pixels, so it fits into our model and we generate a one-dimensional array from the image bitmap. This array is then loaded into a tensor with the right dimensions. We need the fourth dimension at the beginning because the predict function takes a batch of tensors to predict.

Now we can build the classify function, which is the interesting one at the end, that generates the value of the package.

classify = async imgURI => {
  const img = await this.loadImg(imgURI);
  const predictions = await this.model.predict(img);
  const prediction = predictions
    .reshape([1000])
    .argMax()
    .dataSync()[0];
  const result = this.labels[prediction];
  return result;
};

We call the function with the URI of the image, we want to have classified. Then the image gets loaded and thrown into the model to get the prediction. From the predictions we get us the id of the maximum value in the tensor and look it up in our labels object. This result is then returned and hopefully predicts the right object.

In the end, my project structure looks like following.

.
├── assets
│   └── labels.json
├── .gitignore
├── .babelrc
├── package.json
├── package-lock.json
├── README.md
├── LICENSE
├── ResNet50
│   ├── group1-shard1of25.bin
                .
                .
                .
│   ├── group1-shard25of25.bin
│   └── model.json
└── src
    └── index.js

Now we can just publish our package using npm run prepare && npm publish.

Here a short CodeSandbox example, how to use the package.

If you have any open questions, for example about my concrete babel configuration or anything else, feel free to have a look at my GitHub repo.
I would also be happy if you try out the npm package and give me feedback about usability and any ideas for improvement.

Github: https://github.com/paulsp94/tfjs_resnet_imagenet
NPM: https://www.npmjs.com/package/resnet_imagenet

Convert Keras models to TensorFlow.js

Paul — Mon, 26 Aug 2019 09:48:08 +0000

If you developed ML applications using TensorFlow (Python) and want to move them to the web, you can easily do it with the TensorFlow js framework now. There is no need to retrain the models, as long as they don't use any custom layers, which is currently still not supported.

To start with the conversion, you have to load the model into python, for example like this:

from tensorflow.keras.applications import resnet50

model = resnet50.ResNet50(include_top=True, weights='imagenet')
model.save('./ResNet50.h5')

After loading the model, save it including weights into an hdf5 file. [1]

For the conversion of the model, you have to install the tensorflowjs python package: pip install tensorflowjs

Then you can convert the Keras model using the following command.

tensorflowjs_converter \
    --input_format=keras \
    --output_format=tfjs_layers_model \
    ./ResNet50.h5 \
    ./ResNet50

This command converts your model to a model.json file with the architecture configuration and multiple .bin files with the stored weights.

After the command finished, you can simply import the model into node with the following lines of code.

const tf = require('@tensorflow/tfjs-node');

const ResNet50URI = `file:///${__dirname}/ResNet50/model.json`
const ResNet50 = await tf.loadLayersModel(ResNet50URI);

Or alternatively in the web:

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>

<script> 
    const ResNet50URI = `file:///${__dirname}/ResNet50/model.json`
    const ResNet50 = await tf.loadLayersModel(ResNet50URI);
</script>

Afterward, you can just use the predict function as usual to execute the model.

[1] P.S.
There is one thing you need to take care of when doing that. The python kernel has to be restarted every time you load the model because of the layer naming. This GitHub issue explains the problem well.
Additionally, some custom models build in TensorFlow (python) are not ready to be converted. You can only convert models with layers, initializers and operations implemented in TensorFlow js.

The results can be found here:
https://github.com/paulsp94/tfjs_resnet_imagenet/tree/master/ResNet50