---
title: "Discussion on \"Visual regression testing React Native apps with Detox and Jest\" | Hashnode"
description: "Discussion on \"Visual regression testing React Native apps with Detox and Jest\". Visual regression testing with Detox\nDetox supports taking screenshots, which can be used for visual regression testing purposes. \nAs discussed in the Detox documentation: \n\n\nIn both cases, the concept is mainly useful for verifying the proper visual..."
url: "https://hashnode.com/posts/visual-regression-testing-react-native-apps-with-detox-and-jest/62081c2ba2be760e35396a8c"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [Visual regression testing React Native apps with Detox and Jest](https://hughmccamphill.com/visual-regression-testing-react-native-apps-with-detox-and-jest?utm_source=hashnode&utm_medium=feed)

Visual regression testing with Detox Detox supports taking screenshots, which can be used for visual regression testing purposes. As discussed in the Detox documentation: In both cases, the concept is mainly useful for verifying the proper visual...

Feb 12, 2022 · 5 min read · hughmccamphill.com  
Updated Jun 21, 2022  
Read the article

-   [#mobile](https://hashnode.com/tag/mobile)
-   [#testing](https://hashnode.com/tag/testing)

## Written by

[Hugh McCamphill](https://hashnode.com/@hughleo)

@hughleo

  
[View profile](https://hashnode.com/@hughleo)

## Responses 3

Markdown supported · ⌘↵ to post

[fertyga098](https://hashnode.com/@fertyga098)

[Nov 14, 2023](https://hashnode.com/posts/visual-regression-testing-react-native-apps-with-detox-and-jest/62081c2ba2be760e35396a8c/comment/655334860701ac13578c78f9)

Hello, do you have source code of this? Can you share it?

[Hugh McCamphill](https://hashnode.com/@hughleo)

[Nov 14, 2023](https://hashnode.com/posts/visual-regression-testing-react-native-apps-with-detox-and-jest/62081c2ba2be760e35396a8c/comment/655334860701ac13578c78f9#reply-655346baadd2d72f5f031ee6)

ah sorry, I'm no longer with the company where I did this work

[Serhiy Tymoshenko](https://hashnode.com/@sergtimosh)

[Sep 27, 2022](https://hashnode.com/posts/visual-regression-testing-react-native-apps-with-detox-and-jest/62081c2ba2be760e35396a8c/comment/6333353cfa20fa4bc8e5044b)

Thanks a lot for the idea and the article! Could you please elaborate more on **Extend jest expect** part? Didn't quite get how do you expose this jest extension helper to the tests? Maybe you have some public repo to share the structure and configuration? Thanks in advance!

[Hugh McCamphill](https://hashnode.com/@hughleo)

[Sep 27, 2022](https://hashnode.com/posts/visual-regression-testing-react-native-apps-with-detox-and-jest/62081c2ba2be760e35396a8c/comment/6333353cfa20fa4bc8e5044b#reply-63334989e594fa4ba3b89207)

It's exposed globally because we do this:

**global.jestExpect = jestExpect**

This means you can just use jestExpect in the tests, like in the example.

[Serhiy Tymoshenko](https://hashnode.com/@sergtimosh)

[Sep 28, 2022](https://hashnode.com/posts/visual-regression-testing-react-native-apps-with-detox-and-jest/62081c2ba2be760e35396a8c/comment/6333353cfa20fa4bc8e5044b#reply-6333f81cfa20fa4bc8e51171)

[Hugh McCamphill](https://hashnode.com/@hughleo) Yes, I see that :) But it's still a question for me where and how do you expose jestExpect to already use in this block? I am lacking infrastructure understanding for that purpose To use **jestExpect** instead of the **expect** exposed by detox I have to import it explicitly.

Also I see the issue with **toMatchImage** not available in the methods scope after been extended to.

```
import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
import fs from 'fs';
import path from 'path';
import kebabCase from 'lodash.kebabcase';
import jestExpect from 'expect'

const toMatchImage = configureToMatchImageSnapshot({
  comparisonMethod: 'ssim', failureThreshold: 0.002, failureThresholdType: 'percent'
});

jestExpect.extend({ toMatchImage });

jestExpect.extend({
  async toMatchImageSnapshot(screenName) {
    const platform =  device.getPlatform();
    const deviceName =  device.name.split(' ').slice(1).join('');
    const deviceType = JSON.parse(deviceName).type.replace(',','');

    const SNAPSHOTS_DIR = `__image_snapshots__/${platform}/${deviceType}`;

    const { testPath, currentTestName } = this;

    const customSnapshotsDir = path.join(path.dirname(testPath), SNAPSHOTS_DIR);
    const customSnapshotIdentifier = kebabCase(`${path.basename(testPath)}-${currentTestName}-${screenName}`)

    const tempPath = await device.takeScreenshot(screenName);
    const image = fs.readFileSync(tempPath);
    jestExpect(image).toMatchImage({ customSnapshotIdentifier, customSnapshotsDir });
                       ~~~~~~~~~~~
    return { pass: true }
  },
});

global.jestExpect = jestExpect
```

[Hugh McCamphill](https://hashnode.com/@hughleo)

[Dec 9, 2022](https://hashnode.com/posts/visual-regression-testing-react-native-apps-with-detox-and-jest/62081c2ba2be760e35396a8c/comment/6333353cfa20fa4bc8e5044b#reply-63934f82344783061f8c55fb)

[Serhiy Tymoshenko](https://hashnode.com/@sergtimosh) - sorry I don't quite follow

Yes - in our tests we import jestExpect when needed.

for the scoping issue you see - is that not just a linting issue?

[Mariya Grishchenko](https://hashnode.com/@mashagrsh)

[Jun 21, 2022](https://hashnode.com/posts/visual-regression-testing-react-native-apps-with-detox-and-jest/62081c2ba2be760e35396a8c/comment/62b1a12394003a788976d8b0)

Hi, you have a link in your article about integration Allure for Detox, but it redirects with 404. Could you please specify the actual link for it? I have problems with adding Allure to Detox? It would be precious for me.

Thanks a lot!

[Hugh McCamphill](https://hashnode.com/@hughleo)

[Jun 21, 2022](https://hashnode.com/posts/visual-regression-testing-react-native-apps-with-detox-and-jest/62081c2ba2be760e35396a8c/comment/62b1a12394003a788976d8b0#reply-62b1a31c0572b078ae515d45)

I've fixed it - try now and let me know if still broken