我如何获得笑话/酶测试通过此require语句，其中包含路径和道具 [英] how do i get a jest/enzyme test to pass this require statement containing a path and a prop

问题描述

我正在尝试测试一个包含代码<img alt='avatar' src={require(`../../assets/${avatar}`)} />的react模块，该模块包含一个路径和一个prop，该prop包含从redux存储接收的文件名.它可以正常显示，但测试会抛出错误无法从'UserProfile.js'找到模块'../../assets/'" ，听起来好像它认为路径是模块.完整的代码如下:

Hi I'm trying to test a react module that contains the code <img alt='avatar' src={require(`../../assets/${avatar}`)} /> which concats a path and a prop containing a file name received from the redux store. It renders fine but the test throws the error "Cannot find module '../../assets/' from 'UserProfile.js'" which sounds like it thinks the path is a module. The full code is as follows:

模块

import React from 'react'
import PropTypes from 'prop-types'

const UserProfile = ({name='', avatar=''}) => {

    return (
        <section className='bg-bright padding-m'>
            <img alt='avatar' src={require(`../../assets/${avatar}`)} />
            {name}
        </section>
    )

}

UserProfile.propTypes = {
    name: PropTypes.string,
    avatar: PropTypes.string
}

export default UserProfile

测试

import { shallow } from 'enzyme'
import UserProfile from '../../../src/components/ui/UserProfile'

describe('<UserProfile /> component', () => {
    it('renders enclosing html tag', () => 
        expect(
            shallow(<UserProfile />)
                .find('section')
                .length
            ).toBe(1)
        )
})

所使用的redux存储数据看起来像

The redux store data it's using looks something like

{
    "name": "a name",
    "avatar": "name.jpg"
  }

错误

● <UserProfile /> component › renders enclosing html tag

    Cannot find module '../../assets/' from 'UserProfile.js'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
      at Object.UserProfile [as type] (src/components/ui/UserProfile.js:8:72)
      at ReactShallowRenderer.render (node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:104:34)
      at node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:289:35
      at withSetStateAllowed (node_modules/enzyme-adapter-utils/build/Utils.js:93:16)

相关行呈现为

<img alt="avatar" src="/static/media/admin.34e378b0.jpg">

如果任何人有任何见解，我们将不胜感激.如果这些见解涉及返回图像路径的更好方法，那也将是很好的.谢谢.

If anyone has any insights it'd be appreciated. If the insights involve a better way to return the image path that would be fine too. Thanks.

推荐答案

首先，在浅浅渲染组件时需要传递一些道具:

First of all you need to pass some props when shallow rendering your component:

describe('<UserProfile /> component', () => {
    it('renders enclosing html tag', () => 
        expect(
            shallow(<UserProfile name="fakeName" avatar="fakeAvatar" />)
                .find('section')
                .length
        ).toBe(1);
    );
});

然后该酶将在路径../../assets/${avatar}处寻找模块，因此在上述测试中:../../assets/fakeAvatar

Then after that enzyme will look for a module at the path ../../assets/${avatar} so in the case of the test above: ../../assets/fakeAvatar

该路径上显然没有任何内容，因此您需要对其进行模拟:

There is obviously nothing at that path so you need to mock it:

jest.mock('../../assets/fakeAvatar', () => 'fake/image/url.png');

因此，您的完整测试将是

So your full test would be

describe('<UserProfile /> component', () => {
    it('renders enclosing html tag', () => 
        jest.mock('../../assets/fakeAvatar', () => 'fake/image/url.png');
        expect(
            shallow(<UserProfile name="fakeName" avatar="fakeAvatar" />)
                .find('section')
                .length
        ).toBe(1);
    );
});

这篇关于我如何获得笑话/酶测试通过此require语句，其中包含路径和道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！