使用 Jest 为图像创建模拟

Question

我有一个函数，它返回带有标题和图像的对象数组：

import fire from 'assets/svg/fire.svg';
import water from './img/water.svg';
import wind from './img/wind.svg';


const getConfig = (gender) => {
   return [
       {
         title: 'first title',
         image: fire
       },
       {
         title: 'second title',
         image: gender === 'male' ? wind : water
       }
     
   ]
}

我想创建测试来检查文件名是否正确。例如：

expect(optionsData[0].title).toBe('first title');
expect(optionsData[0].image).toBe('fire.svg');

没有找到正确的解决方案。 创造的人

module.exports = 'test-file-stub';

文件中的Mock.ts将始终返回相同的字符串，如果图像取决于性别，则它是无用的。

解决方案形式问题如何在测试中手动模拟 Svg？不起作用，因为我从 fileMock 获取字符串。如果我删除这些文件，结果是：

Expected: "fire.webp"
Received: "2n��-3��Dj�+��jŊ�aq���"

或

- Expected  - 1
+ Received  + 2

- fire.svg
+ svg>
+

Answer 1

请参阅模拟 CSS 模块文档：

如果

moduleNameMapper

无法满足您的要求，您可以使用Jest的

transform

配置选项来指定资产如何转换。例如，返回文件基本名称的转换器（例如

require('logo.jpg')

；返回

'logo'

）可以写为：

const path = require('path');

module.exports = {
  process(sourceText, sourcePath, options) {
    return {
      code: `module.exports = ${JSON.stringify(path.basename(sourcePath))};`,
    };
  },
};

jest.config.js

：

module.exports = {
  transform: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/fileTransformer.js',
  },
};

这样我们就可以针对不同的图像模块返回不同的值。

对于您的问题，请参阅以下示例：

index.js

：

import fire from './assets/fire.svg';
import water from './assets/water.svg';
import wind from './assets/wind.svg';

const getConfig = (gender) => {
  return [
    {
      title: 'first title',
      image: fire,
    },
    {
      title: 'second title',
      image: gender === 'male' ? wind : water,
    },
  ];
};

export default getConfig;

index.test.js

：

import getConfig from './';

describe('78711697', () => {
  test('should return correct if gender is male', () => {
    const conf = getConfig('male');
    expect(conf).toEqual([
      { title: 'first title', image: 'fire.svg' },
      { title: 'second title', image: 'wind.svg' },
    ]);
  });

  test('should return correct if gender is female', () => {
    const conf = getConfig('female');
    expect(conf).toEqual([
      { title: 'first title', image: 'fire.svg' },
      { title: 'second title', image: 'water.svg' },
    ]);
  });
});

fileTransformer.js

：

const path = require('path');

module.exports = {
  process(sourceText, sourcePath, options) {
    return {
      code: `module.exports = ${JSON.stringify(path.basename(sourcePath))};`,
    };
  },
};

jest.config.js

：

module.exports = {
  testEnvironment: 'jsdom',
  setupFiles: [
    '<rootDir>/jest.setup.js',
  ],
  transform: {
    '\\.[jt]sx?$': 'babel-jest',
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/stackoverflow/78711697/fileTransformer.js',
  },
};

测试结果：

 PASS  stackoverflow/78711697/index.test.js
  78711697
    √ should return correct if gender is male (2 ms)                                                                                                                                                                                                      
    √ should return correct if gender is female                                                                                                                                                                                                           
                                                                                                                                                                                                                                                          
Test Suites: 1 passed, 1 total                                                                                                                                                                                                                            
Tests:       2 passed, 2 total                                                                                                                                                                                                                            
Snapshots:   0 total
Time:        0.802 s, estimated 1 s
Ran all test suites related to changed files.